（ _(:3 」∠)_给园友们提个建议，无论是API文档还是书籍，一定要多看几遍！特别是隔一段时间后，会有意想不到的收获的）

这篇文章主要是写关于学习react中的一些自己的思考：

1.setState到底是同步的还是异步的？

2.如何在子组件中改变父组件的state

3.context的运用，避免“props传递地狱”

4.组件类里有私有变量a，它到底改放在this.a中还是this.state对象中（作为属性a）呢？

1.setState到底是同步的还是异步的？

class MyComponent extends React.Component{ constructor(props) { super(props) this.state ={ value:0 } } handleClick = () => { this.setState({value:1}) console.log('在handleClick里输出' + this.state.value); } render(){ console.log('在render()里输出' + this.state.value); return (<div> <button onClick ={this.handleClick}>按钮</button> </div>) } } export default MyComponent
//省略渲染过程，下面也一样

在这里我们点击按钮时，调用handleClick函数，首先调用this.setState()设置value,随即把this.state.value输出，结果是什么？

你可能会想，这还不简单——“在handleClick里输出1”呗，然而你错了，它的结果为：

事实上，setState()的调用是异步的，这意味着，虽然你调用了setState({value:0})，但this.state.value并不会马上变成0，而是直到render()函数调用时，setState()才真正被执行。结合图说明一下：

你可能又会问了：要是我在render()前多次调用this.setState()改变同一个值呢？（比如value）

我们对handleClick做一些修改，让它变得复杂一点，在调用handleClick的时候，依次调用handleStateChange1 ，handleStateChange2，handleStateChange3，它们会调用setState分别设置value为1,2,3并且随即打印

handleStateChange1 = () => { this.setState({value:1}) console.log('在handleClick里输出' + this.state.value); } handleStateChange2 = () => { this.setState({value:2}) console.log('在handleClick里输出' + this.state.value); } handleStateChange3 = () => { this.setState({value:3}) console.log('在handleClick里输出' + this.state.value); } handleClick = () => { this.handleStateChange1(); this.handleStateChange2(); this.handleStateChange3(); }

那么输出结果会是什么呢？如果setState是同步调用的，那么结果显然为

在handleClick里输出1

在handleClick里输出2

在handleClick里输出3

但是结果为：，证明它是异步的

这下好理解了吧，配合这幅图：

2.如何在子组件中改变父组件的state呢？

这是我们经常会遇到的问题之一，解决办法是：在父组件中写一个能改变父组件state的方法，并通过props传入子组件中

class Son extends React.Component{ render(){ return(<div onClick = {this.props.handleClick}> {this.props.value} </div>) } } class Father extends React.Component{ constructor(props){ super(props) this.state ={ value:'a' } } handleClick = () => { this.setState({value:'b'}) } render(){ return (<div style ={{margin:50}}> <Son value = {this.state.value} handleClick = {this.handleClick}/> </div>) } }

点击子组件Son，内容由a变成b，说明父组件的state被修改了

3.context的运用，避免“props传递地狱”

3.1假设一个比较极端的场景：你需要从你的子组件里调用父父父父父组件的属性或方法，怎么办！当组件嵌套层级过深的时候，不断地传props作为实现方式简直就是噩梦！我称之为“props传递地狱”（这个词是我瞎编的，参考自“回调函数地狱”）

我们接下来实现的是这样一个需求，把gene属性（基因）从组件GrandFather -->Father --> Son传递，如果用props传递：