React - 组件：类组件 - Powered by Discuz! Archiver

达康书记 發表於 2019-12-9 00:25:00

React - 组件：类组件

<h3>目录：</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">1. 类组件有自己的状态
2. 继承React.Component-会有生命周期和this
3. 内部需要一个render函数（类组件会默认调用render方法，但不会默认添加，需要手动填写render函数，并return一个能渲染的值。）
4. 类组件的基本架构
5. constructor里边添加自己的属性和状态、方法
a. 写了constructor就要写super
b. 如果c里边没内容只有super，name可以不写
6. 添加状态this.state = {}; es7写法state = {}。非双向绑定
7. setState接收对象的情况、批量更新
8. setState接收函数的情况、state与penddingState
9. class里方法的写法
a. 方法里边this的指向undefined的情况
class Person {
fn(){
 console.log(this);
}
}
var person = new Person();
var fn1 = person.fn;
fn1(); //undefined
b. bind改变this指向
c. 箭头函数继承this指向
d. 匿名函数传参
10. TodoList实战
11. 类组件注意：
注意绑定事件时，"on"后边事件名的首字母大写，如"change"要写成"Change"注意回调函数内部this的指向默认为undefined，要改变this指向
不能直接改变state的值、需要用函数setState来修改state的值
</pre>
</div>
<h3>类组件：</h3>
做复杂的数据处理、需要有自己的状态的时候，需要用类组件。
他有自己的生命周期也有react给他提供的一些内置函数方法。有自己的this和状态。
<h3>要点：</h3>
 • 类的名字就是组件的名字 • 类的开头一定要大写 • 类要继承自React.Component • 组件内部一定要有render函数，否则报错
定义一个组件：
<div class="cnblogs_code">
<pre> 1 import React from 'react'
 2
 3 class TodoList extends React.Component {
 4 render(){
 5 let todoList = <div>
 6 <h3>我是类组件</h3>
 7 </div>
 8 return todoList;
 9 // 所以类组件内部必须有render函数，并return返回一个可渲染的值。
10 };
11 }
12
13 export default TodoList</pre>
</div>
 
引入组件：
<div class="cnblogs_code">
<pre>import TodoList from '../components/TodoList'</pre>
</div>
 
调用组件：
<div class="cnblogs_code">
<pre><TodoList></TodoList></pre>
</div>
 类组件内部没有render函数报错：
<img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191208235838421-1861444324.png" alt="" width="308" height="169">
因为看到class组件会默认调用render方法 如果看到函数组件，会自动在函数内部添加一个render方法，把函数的return返回值放到render中运行。 所以类组件内部必须有render函数，并return返回一个可渲染的值。不会进行自动添加。
<h3> </h3>
<h3>开发1个类组件 - TodoList：</h3>
组件内部要使用的数据称之为状态state。 state的值一定是对象，并且state这个拼写也是固定的： 
 <img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191208235845560-1999763712.png" alt="" width="398" height="22">
 
1、准备一个模块，并做初步数据渲染尝试：
 <img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191208235853446-1307533556.png" alt="" width="438" height="512">
2、填写数据并执行添加功能，将input内容添加到list （没有vue的双向数据绑定功能，只是单向的。应该知道input的内容，然后把值设置给state数据，再把state数据放到list列表中渲染。）
2-1、需要onChange事件监听input输入。回调函数=类里边定义的函数。 注意"on"后边事件名的首字母大写，如"change"要写成"Change"
<img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000149301-255702364.png" alt="" width="448" height="487">
=== 
 <img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000208475-1848140006.png" alt="" width="786" height="315">
 
2-2、onChange后给state里的inputVal赋值 注意回调函数内部this的指向：默认，this指向undefined
<img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000222607-1784397991.png" alt="" width="1031" height="64">
因为只是监听change事件的时候，调用handleChange函数，这个函数没人调用，就会指向undefined。 跟下边这段代码一样：
<img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000233766-1934170712.png" alt="" width="224" height="186">
 
改变this指向：通过绑定
<div class="cnblogs_code">
<pre>onChange= { this.handleChange.bind(this) }</pre>
</div>
 
 不能直接改变state的值，会有警告：
<div class="cnblogs_code">
<pre>// this.state.inputVal = e.target.value;</pre>
</div>
<img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000309461-93523267.png" alt="" width="528" height="49">
 
需要用函数setState来修改state的值
<div class="cnblogs_code">
<pre>this.setState({
inputVal: e.target.value
})</pre>
</div>
 
最终代码：
<img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000335031-406345649.png" alt="" width="510" height="652">
 
2-3、添加功能 注意this绑定、空值的防抖判断等。
<img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000400891-1567066756.png" alt="" width="346" height="93">
 <img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000412478-374424700.png" alt="" width="563" height="909">
  
3、删除功能
 <img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000518807-1363021084.png" alt="" width="507" height="235">
 <img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209002739893-242443263.png" alt="" width="378" height="530">
 
  
<h3>改变this指向的其他方法：</h3>
1、bind绑定
<div class="cnblogs_code">
<pre>this.handleDelete.bind(this,i)</pre>
</div>
没点击一次就执行了多少次的函数。
 
2、顶部绑定
<img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000632535-191491007.png" alt="" width="439" height="50">
<div class="cnblogs_code">
<pre>onChange= { this.handleChange }</pre>
</div>
 
3、箭头函数改变this指向【重点、核心方案】
<div class="cnblogs_code">
<pre>onChange= { this.handleChange }</pre>
</div>
<img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000642515-127970689.png" alt="" width="295" height="89">
 
4、匿名函数【要传参的情况】 在匿名函数内部让函数去执行
<img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000656711-2058395266.png" alt="" width="445" height="154">
 <img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209002225884-1702243414.png" alt="" width="414" height="510">
 
<h3>一个函数里有多个setState：</h3>
<img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000741111-1014766595.png" alt="" width="387" height="105">
setState里边传入对象，会有参数覆盖的情况。上图示例中只执行最后一个。
批量更新：
在一个函数里有多个setState的情况下，react就会把多个setState放到一起，进行合并。合并完了以后再去执行。那么就只剩下最后一个会起作用了。
目的/好处：
减少虚拟dom的比对，提高渲染的性能。
 
<h3>setState接收函数的情况：setState纯函数</h3>
就想设置多个setState还想绕过批量更新，就可以在setState函数里传参函数：
<img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000805074-2117049911.png" alt="" width="319" height="403">
return的对象里边是你要更改的状态。
 
流程是先进行更改，更改的内容放在pendingState中进行等待。函数完毕后再把pendingState的内容一次性再设置给state里。
<img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000857001-1394005850.png" alt="" width="443" height="137">
 
 
 <img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000904285-1103113568.png" alt="" width="437" height="143">
 
 
 <img src="https://img2018.cnblogs.com/blog/956663/201912/956663-20191209000910576-462549566.png" alt="" width="432" height="131">
 
 
2019-12-09 00:24:02

</div>
<div id="MySignature" role="contentinfo">
越努力，越幸运；阿门。 
来源：https://www.cnblogs.com/padding1015/p/12008771.html

頁: [1]

琼殿技术论坛's Archiver

React - 组件：类组件