前端基础知识学习第十二节（React篇）

　　React中高阶组件（HOC）和高阶函数是什么？

　　答案：
　　React中的高阶组件本质上是一个函数，只是这种组件（函数）接收一个组件参数，返回一个新的组件。比如说redux中的connect方法，把redux的state和action创建
　　函数，通过props注入给了component，你在目标组件component里可以直接用this.props去调用redux state和action创建函数了
　　ConnectedComment = connect(mapStateToProps, mapDispatchToProps)(Component);
　　相当于这样
　　// connect是一个返回函数的函数（就是个高阶函数）
　　const enhance = connect(mapStateToProps, mapDispatchToProps);
　　// 返回的函数就是一个高阶组件，该高阶组件返回一个与Redux Store关联起来的新组件
　　const ConnectedComment = enhance(Component);
　　高阶函数：接收的参数是函数或者返回值是函数，如数组遍历相关的（map，reduce），定时器，Promise，高阶组件也是高阶函数，高阶函数的作用就是实现一个
　　更加强大动态的功能
　　参考：https://www.cnblogs.com/gwf93/p/10295125.html
　　　　　https://blog.csdn.net/IT_10/article/details/100148201

　　React有几种定义组件的方式，分别是什么？

　　答案：
　　React有3中定义组件的方式，分别是
　　1)函数式定义 - 无状态组件
　　无状态组件是为了纯展示，只负责根据传入的props来展示，不涉及对state的操作。无状态函数式组件形式上表现为只带一个render方法的组件类，通过函数声明
　　或者ES6箭头函数来创建，具体创建形式：
　　function HelloComponent(props, / * context * /) {
　　　　return <div>Hello {props.name}</div>
　　}
　　ReactDOM.render(<HelloComponent name="Herly" />, mountNode);
　　无状态组件具有以下几个特点：
　　组件不会被实例化，整体渲染性能得到提升
　　组件不能访问this对象
　　组件无法访问生命周期的方法
　　无状态组件只能访问输入的props，同样的props得到同样的渲染结果

　　2)ES5语法 - React.createClass定义的组件
　　React.createClass是React刚开始推荐的定义组件方式，与无状态组件相比，这种方式创建的是有状态的组件，这些组件是要被实例化的，并且可以访问组件的
　　生命周期方法，每一个成员函数的this都由React自动绑定，函数中的this被正确设置，可以使用Mixins

　　3)ES6语法 - extend React.component定义的组件
　　React.component方式创建组件是目前React极为推荐的创建有状态组件方式，以后会统一为这种方式。React.component形式非常适合高阶组件
　　（Higher Order Components--HOC），他以更直观的形式展示了比mixins更强大的功能，并且HOC是更纯净的JavaScript，不用担心他们被废弃

　　参考：https://www.cnblogs.com/soyxiaobi/p/9573767.html

　　React的setState内部实现原理？

　　答案：
　　1)setState首先会对传入的对象进行一个合并（浅拷贝）
　　2)setState对数据的更新是异步的
　　3)通过this.state更改不会触发render的重新渲染
　　4)在React中，如果是由React引发的事件处理（比如通过onClick），调用setState不会同步更新this.state，除此之外的setState调用会同步更新this.state。
　　这里的除此之外指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。
　　原因：在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates
　　默认是false，也就表示setState会同步更新this.state，但是有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，
　　而当React在调用事务处理函数之前就会调用这个batchedUpdates函数，造成的结果就是由React控制的事件处理过程setState不会同步更新this.state。
　　对于异步渲染，我们应在getSnapshotBeforeUpdate中读取state、prop，而不是componentWillUpdate，调用forceUpdate强制render时，会导致组件跳过
　　shouldComponentUpdate方法，直接调用render
　　参考：https://github.com/sisterAn/blog/issues/26

　　React的性能优化？

前端基础知识学习第十二节（React篇）

相关推荐