[JavaScript知识库]React数据管理

setState调用之后发生了什么？是同步还是异步的？

在代码中调用setState后React会将传入的对象与当前组件的状态合并，然后触发调和过程。经过调和过程，React会根据新的状态构建React元素树，然后计算新老元素树节点的差异，根据差异对页面进行渲染。。

根据场景来决定是同步还是异步。

• 同步：在React无法控制的地方，比如原生事件，例如：addEventListener、setTimeout、setInterval等事件中，就只能同步更新。
• 异步：在React生命周期和合成事件中，React可以把多次setState合并到一起进行更新，提高效率。

setState设计为异步，可以提升性能。如果每次setState都要进行一次更新，那么意味着render函数会被频繁调用，这样效率很低。React采用延迟更新策略，可以把多次setState合并到一起进行更新，提高效率。

对于相同状态的进行同时调用setState，只有最后一个setState会生效，而不是单纯的累加。

// 每次点击按钮value的值+2，而不是+3
<button 
  onClick={() => (
    setValue(value + 1), 
    setValue(value + 2)
  }
>
  value + 1
</button>

getDefaultProps和defaultProps

getDefaultProps和defaultProps用于指定属性的默认值。

// ES5
getDefaultProps: function(){
    return {
        autoPlay: false,
        maxLoops: 10
    }
},

// ES6
// 静态函数:使某个函数只在一个源文件中有效，不能被其他源文件所用
static defaultProps = {
  name: "lsw"
}

setState的第二个参数是什么？

setState的第二个参数是一个回调函数，在组件重新渲染完后执行，等价于在componentDidUpdate中执行。在这个回调函数中可以拿到更新的后state的值。

setState和replaceState的区别是什么？

setState用来设置状态，它接收两个参数，第一个参数是新的状态值，第二个参数是一个可选的回调函数，在状态改变后执行，可以获取到状态改变后的值。
React会将多次的setState合并为一次执行，提高性能，减少页面渲染次数。setState只是覆盖原来的状态，不会减少原来的状态。

replaceState只会保留nextState中的值，原来的state将被删除，相当于赋值。

state和props的区别

props是从组件外部传入的，主要用于父组件向子组件传递数据，具有只读性，只能通过外部组件主动传递数据来渲染子组件。state的作用是组件自己用来创建、修改、管理自身状态，他是组件的私有属性，不可通过外部修改，只能在组件内部通过this.setState修改，修改state会导致页面重新渲染。

校验propTypes

propTypes用来对传入的props数据进行验证，若props与propTypes定义的数据类型不符，控制台会报警告。可以避免随着程序越来越复杂出现的问题，还可以让程序变得更加易读。