React的若干问（学习记录）

一、设计组件的时候，什么时候选择用prop什么时候选择用state？

答：prop是组件的对外接口，state是组件内部状态，对外用prop，内部用state。

---

二、给组件prop赋值时什么时候加{}

答：先举个例子 

<SampleButton

    id="sample"

    borderWidth={2}

    onClick={onButtonClick}

    style={{colaor: "red"}}

/>

当prop的类型不是字符串类型时，在JSX中必须用胡括号{}把prop值包住，所以style的值有两层花括号，外层花括号代表是JSX的语法，内层的花括号代表这是一个对象变量。

---

三、prop和state的对比

答：（1）prop用于定义外部接口，state用于记录内部状态；

（2）prop的赋值在外部世界使用组件时，state的赋值在组件内部；

（3）组件不应该改变prop的值，而state存在的目的就是让组件来改变的。

---

四、constructor 构造函数的作用

答：（1）super（props）。如果构造函数中没有调用super（props），那么组件实例被构造之后，类实例的所有成员函数就无法通过this.props访问到父组件传递过来的props值；

（2）初始化state，因为组件生命周期中任何函数都可能要访问state，那么整个生命周期中第一个被调用的构造函数自然是初始化state最理想的地方；

（3）绑定成员函数的this环境，ES6语法下，类的每个成员函数在执行时的this并不是和类实例自动绑定的。而在构造函数中，this就是当前组件的实例，所以，为了方便将来的调用，往往在构造函数中将这个实例的特定函数绑定this为当前实例。

五、render函数为什么一定要实现

答：因为所有React组件的父类React.Component类对除了render之外的生命周期函数都有默认实现。

六、什么时候生成DOM树

答：render函数本身并不往DOM树上渲染或者装载内容，它只是返回一个JSX表示的对象，然后由React库来根据返回对象决定如何渲染。而React库肯定是要把所有组件返回的结果综合起来，才能知道该如何产生对应的DOM修改。需要注意的是，render函数被调用完之后，componentDidMount函数并不是会被立即调用，componentDidMount被调用的时候，render函数返回的东西已经引发了渲染，组件已经被“装载”到了DOM树上。

函数调用顺序：constructor()1 → render()1 → constructor()2 → render()2 →……componentDidMount()1 →  componentDidMount()2

---

七、如何让React和其他UI库（如jQuery、d3.js）配合使用？

答：由问题六可知，当componentDidMount被执行时，React组件对应的DOM已经存在，所有的时间处理函数也已经设置好，这时候可以调用jQuery、d3.js的代码，让jQuery、d3.js代码在已经绘制的DOM基础上增强新的功能。当需要更新的时候，即React组件被更新时，原有的内容被重新绘制，这时候就需要componentDidUpdate函数再次调用jQuery、d3.js代码。

---

八、componentWillReceiveProps（nextProps）何时会被调用？

答：只要父组件的render函数被调用，在render函数里面被渲染的子组件就会经历更新过程，不管父组件传给子组件的props有没有改变，都会触发子组件的componentWillReceiveProps函数。

---

九、调用shouldComponentUpdate时，this.state的值指的是哪个值？

答：通过this.setState函数引发更新过程，并不是立刻更新组件的state值，在执行到函数shouldComponentUpdate的时候，this.state依然是this.setState函数执行之前的值。所以在shouldComponentUpdate函数中，我们实际做的是在nextProps、nextState、this.props和this.state中相互对比。