React

组件化

可以复用

 

虚拟DOM

①通过JS对象模拟原生DOM，因为JS对象比DOM对象性能高，所以能极大的提升了性能，

 

每次数据改变就会重新生成一个完整的虚拟DOM，计算和之前的虚拟DOM的差距，更新真实DOM中真正发生改变的部分

②抽象了DOM的实现

 

父子组件传值

父向子：通过props传值

子向父：父组件通过props传一个函数，子组件调用函数并把值传过去

生命周期

首次被实例化，依次调用getDefaultProps, getInitialState, componentWillMount, render, componentDidMount

之后父组件render会触发componentWillReceiveProps, 然后和this.setState同样会触发shouldComponentUpdate,

然后和this.forceUpdate 同样会触发componentWillUpdate-->render-->componentDidUpdate

最终到componentWillUnmount

 

 

 

React数据获取为什么一定要在componentDidMount里面调用？

获取数据时间过长的话会阻碍组件的实例化

 

react和angular对比

angular比较重，而且复杂（新概念十分多）。react相对来说就比较轻，而且很容易组件化。而angular要复用组件的话还得专门去定义一个directive

 

验证props类型

在class中

static propTypes = {
    goods: PropTypes.instanceOf(Array).isRequired
  }

PropTypes.array

PropTypes.bool

PropTypes.func

PropTypes.number

PropTypes.object

PropTypes.string

PropTypes.node

PropTypes.element

作用是防止外部传过来错误类型的值

 

组件绑定函数为什么要用bind绑定this值？

要让函数内的this指向当前的class，不然会指向运行时的环境

 

为什么不要在组件的props里写bind（）

每次render，bind和箭头函数会创造一个新的函数，会导致垃圾回收器被多次触发，影响性能。也有可能导致re-render。

解决方法：在构造函数里使用bind（）绑定函数到class

 

React报错：Warning: Can’t call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method

原因：在组件调用api的回调函数中，调用了setState, 这个时候点击后退按钮会卸载组件，但是setState会仍然执行。

解决方法：额外维护一个变量，在componentDidMount里设置 this.mounted = true, 在componentWillUnmount里设置为false。在api的回调函数里判断这个变量为真的时候再执行setState

 

<Fragment></Fragment>是一个不可见的包裹组件。当返回多个并列的组件时，没有必要在外面嵌套一层div，用Fragment来替代

 

用&&判断时，前面用！！。如果前面一个为数字，不用！！会出现0的情况

 

<Father {...props}><Son /></Father>

在Father组件的props里包含有Son组件。可以通过props.children获取（可以是数组）