React-白红宇

可以使用setTimeout强制setState实时刷新

服务器端渲染

缩短“第一有意义渲染时间”（First-Meaningful-Paint-Time

更好的搜索引擎优化（Search-Engine-Optimization，SEO)

react生命周期

React的未来

异步渲染

suspense带来的改变，componentDidCatch

函数化的hooks

React组件设计模式

react与原生jquery最大的优势在于：

1.react以数据驱动生成，react帮助我们渲染html，而原生需要我们自己写好元素后再注入进去 2.组件化思想

聪明组件和傻瓜组件最本质的区别就是是否有生命周期，傻瓜组件是没有实例的，就是没有this生成，而聪明组件有状态维护。

高阶组件

render props

提供者模式

组合模式

class Tabs extends React.Component {  state = {    activeIndex:  0  }  render() {    const newChildren = React.Children.map(this.props.children, (child, index) => {      if (child.type) {        return React.cloneElement(child, {          active: this.state.activeIndex === index,          onClick: () => this.setState({activeIndex: index})        });      } else {        return child;      }    });    return (      
    
             {newChildren}      
        );  }}复制代码

1.React.Children.map

2.React.cloneElement

使用 React.Children.map，可以遍历 children 中所有的元素，因为 children 可能是一个数组嘛。

使用 React.cloneElement 可以复制某个元素。这个函数第一个参数就是被复制的元素，第二个参数可以增加新产生元素的 props，我们就是利用这个机会，把 active 和 onClick 添加了进去。

仅用于个人整理，参考