2018-12-10

1.状态更新可能是异步的

React 可以将多个setState() 调用合并成一个调用来提高性能。

因为 this.props 和 this.state 可能是异步更新的，你不应该依靠它们的值来计算下一个状态。

例如，此代码可能无法更新计数器：

this.setState({counter:this.state.counter+this.props.increment,});

要修复它，请使用第二种形式的 setState() 来接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数：

this.setState((prevState,props)=>({counter:prevState.counter+props.increment}));

2.props和state的区别

props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口state。根据对外接口props 和对内接口state，组件计算出对应界面的UI。

主要区别：

State是可变的，是一组用于反映组件UI变化的状态集合；

而Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。

在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态。

props的使用

（1）props(属性) 默认为 “true”

如果你没给 prop(属性) 传值，那么他默认为 true 。下面两个 JSX 表达式是等价的：

<myComponent autoComplete></myComponent>

<myComponent autoComplete={true}></myComponent>

在 HTML 中，< input type=”radio” value=”1” disabled /> 与 < input type=”radio” value=”1” disabled=”true” /> 是等价的。JSX 中的这种行为就是为了匹配 HTML 的行为。

（2）props扩展

如果你已经有一个 object 类型的 props，并且希望在 JSX 中传入，你可以使用扩展操作符 … 传入整个 props 对象。这两个组件是等效的：

functionApp2(){ 

 const props = {firstName: 'Ben', lastName: 'Hector'};

  return <Greeting {...props} />;

}

state的使用

（1）什么是state

React 的核心思想是组件化，而组件中最重要的概念是State（状态），State是一个组件的UI数据模型，是组件渲染时的数据依据。

状态（state） 和 属性（props） 类似，都是一个组件所需要的一些数据集合，但是state是私有的，可以认为state是组件的“私有属性（或者是局部属性）”。

（2）如何判断是否为State ？

组件中用到的一个变量是不是应该作为组件State，可以通过下面的4条依据进行判断：

这个变量是否是通过Props从父组件中获取？如果是，那么它不是一个状态。

这个变量是否在组件的整个生命周期中都保持不变？如果是，那么它不是一个状态。

这个变量是否可以通过其他状态（State）或者属性(Props)计算得到？如果是，那么它不是一个状态。

这个变量是否在组件的render方法中使用？如果不是，那么它不是一个状态。这种情况下，这个变量更适合定义为组件的一个普通属性，例如组件中用到的定时器，就应该直接定义为this.timer，而不是this.state.timer。

更多：https://blog.csdn.net/b954960630/article/details/79822639

3.通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面

参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。