可以使用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 (
<Fragment>
{newChildren}
</Fragment>
);
}
}
1.React.Children.map
2.React.cloneElement
使用 React.Children.map，可以遍历 children 中所有的元素，因为 children 可能是一个数组嘛。
使用 React.cloneElement 可以复制某个元素。这个函数第一个参数就是被复制的元素，第二个参数可以增加新产生元素的 props，我们就是利用这个机会，把 active 和 onClick 添加了进去。
仅用于个人整理，参考
