经验

1.传入的props，需要用的先用简单的名字保存起来，方便编写:

image-20211124174026167

2.解构赋值传参:

（1）左部解构赋值

const { onReset, onIncrement, onDelete, onDecrement, counters, onRestart } = this.props;
  • 左部解构赋值并不是浅拷贝

​ 但是，如下的代码，可以在某种程度上避免误修改props

 const {tags} = this.props;
 const {aaa, bbbb} = tags ;

（2）快速赋值props

 <Menu.Item {...props} key={props.key} >

（3）过滤参数

 const { extraProp, ...passThroughProps } = this.props;
  <WrappedComponent {...passThroughProps} />
//这样就把extraProp过滤掉了

3.事件处理函数的绑定，{handleName}，此处不可以加”（）“，其意思为渲染后立刻执行此回调函数。类似这样**{handleName（true）}**都不可以。

可以这样：

const handleDelete = () => {
    onDelete(id);
  };

这样：

const onDelete = () => {
    onDelete(id);
  };

也就是，把它单拎出来，在重新包装一下。虽然没做什么事情。

4、foreach对于原数组的改变

对于item是基本数据类型：item不可以改变

对于item是对象：可以改变，只要不改变地址就可以。

总结：它另存了一个变量item存每次遍历的变量，不可改变只是针对item，想改变可以直接通过原数组，以该形式numsname[index]去赋值即可。

5、没有什么实际含义的根标签，就可以用（这个就是fragment）

<>
</>最终输出的html没有任何影响

6、删除数组某一个元素

 let newState = state.filter(i => {
      return i.id !== id;
    });

7、在一个函数中使用setState，由于其是异步的，所以console出来的值不是最终值，需要牢记。

8、为什么需要受控组件（又要需要内存维护value值，相对于vue来说，react对于开发者这种交互是暴漏在我们的视野的）

9、重置表单：

const initialValues = {
	weight: '',
	height: '',
	date: ''
}
setState(initialValues);//经典吧

10、数组初始化null

Array(9).fill(null)

11、对象浅拷贝

  • 方法

    Object.assign( { }, prevState.jasper , { score : 2 } )

  • 右侧解构赋值

    jasper = { ...prevState }

12、数组浅拷贝

  • 方法

    this.state.squares.slice()