1.purecomponent 前后进行浅比较
class A extends React.purecomponet{
},
2.能直接对state直接进行赋值 操作,尤其使用purecomponent时会认为赋值后的state与旧state是一个状态从而不进行渲染
3.不用index值key的值
当使用map,forEach遍历数组时,因为需要用key来表示元素的唯一。如果key = index,遍历完的新数组的一个元素进行删除时,因为index是从0开始产生,删掉元素的index会继承给下一个,这是下一个仅仅是index改变了但是数据内容没有变,但是新虚拟dom进行旧虚拟dom数进行对比发现前后这index=2的这元素的内容不一样的就好重新进行一遍不必要的渲染
eg:插一个图片例子 如图删除l3,l4的index就变成
2了,虚拟dom对key进行比较发现前后index=2的内容改变了就渲染这部分,但实际上我们不希望它渲染因为l4内容没有变
发现一个新的教程讲的很详细https://www.cnblogs.com/wonyun/p/6743988.html
3.获取input值的方法
获取input值的方法有两种推荐ref,因为能少对dom操作就少对他操作
方法一:利用React的ref访问DOM元素取值并提交 ???
方法二:利用DOM提供的Event对象的target事件属性取值并提交
这个博主写的详解https://blog.csdn.net/hsany330/article/details/92764178
4.复制一个数组的问题
复制于->侵删 https://www.cnblogs.com/jkr666666/p/7930228.html
var a1 = [1,2,3];
var a2 = a1;
a2[0] = 90;
console.log(a1[0]) //90
解析:数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不能克隆一个全新的数据;
上面的代码中,a2并不是a1的克隆,而是指向同一分数据的另一个指针。修改a2,会直接导致a1的变化。
es5 可以同过下面的方法来克隆一个新的数组:
方法1:
var a1 = [1, 2, 3];
var a2 = a1.concat();
a2[0] = 90;
console.log(a1[0]) //1
方法2:
var a1 = [1, 2, 3];
var a2 = JSON.parse(JSON.stringify(a1));
a2[0] = 90;
console.log(a1[0]) //1
es6克隆一个新的数组的方法:
const a1 = [1,2,3];
写法一:
const a2 = [...a1]; //当添加的是对象时可以把[]换成{}
写法2 :
const [...a2] = a1;
5.点击事件传参问题
eg:点击delete时删除当前li,遇到的问题是怎么li的index传给button,想到了
绑定函数bind(),前提用了map渲染数据产生li
<ul>
<li key={index}>
<button onClick={this.deleteItem.bind(this, index)}>delete</button>
<li>
<ul/>
deleteItem(index: number, e) {
// console.log(a, e.target);
this.props.deleteItem(index);
}
然后想问bind()到底有几个参数 ,看到了如下文章https://blog.csdn.net/genius_yym/article/details/54135567
this.handleclick.bind(this,要传的参数) handleclick(传过来的参数,event)
事件–this.handleclick.bind(this,要传的参数)
函数–handleclick(传过来的参数,event)/ handleclick(传过来的参数)
版权声明:本5小结为CSDN博主「mcya」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
6.受控组件与非受控组件
https://www.jianshu.com/p/d2ca25587688
7.react usecallback
https://zhuanlan.zhihu.com/p/56975681
https://www.jianshu.com/p/585554f77ecf
8.react hooks
https://www.jianshu.com/p/6c43b440dab8
9.useState hooks
setX(e=>e+1),设置函数参数可以是一个函数可以
https://www.cnblogs.com/fundebug/archive/2019/08/22/4-react-usestate-hook-examples.html
10.深拷贝与浅拷贝 前端数据结构
https://www.jianshu.com/p/5e0e8d183102
11 react 实现tree
12.函数组件渲染
https://blog.csdn.net/CVSvsvsvsvs/article/details/93421092
13.Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
in di
https://www.hellojava.com/a/54273.html
14.React中绑定this并传参的三种方式