react写代码需要注意的坑

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

   

•         delete

     

• 
  

  ---

  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 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并传参的三种方式

  https://blog.csdn.net/qq_43512502/article/details/90965996