React.js学习

React 学习总结

router 参数获取的方式

最新版本的 v4 可以直接在组件中调用 this.props 获取 router,不在需要从 context 中获取了。

和 vue-router 不同的一点是：在使用动态路由匹配的时候(比如：path:’/a/:id’),在 vue 中手动修改路由，比如从/a/1修改到/a/2的话，页面是不会刷新的，但是 react 是会重新刷新的。如果在 react 中使用 link 来实现跳转的话，则默认不会刷新。

React 生命周期以及相关概念

作为一个以前经常使用 Vue 的前段来说，其实感觉这两个框架的生命周期都有异曲同工之处。

相比较而言，React 的生命周期概念上较少，但是可操作性上要求更高。有不少的性能高优化可以从生命周期中来实现。

可以在 componentDidMount 中进行 ajax 的通信，可以在 shouldComponentUpdate 中进行性能的优化。

getDerivedStateFromProps()会在初始化和后续的更新中被调用。类似 Vue 中设置 immediately 的 watch，只不过 React 是相对于整体的 props，而 vue 的 watch 是监听单个对象。

PureComponent

如果组件在给定相同的 props 和 states 下渲染的结果相同，那么就可以用 React.PureComponent 来代替 React.Component，但是 PureComponent 中是浅对比，如果对象中包含复杂的数据结构，那么如果要进行更新就必须更改复杂的数据结构的指针，或者使用不可变对象或者监听数据变化强制更新。比如 react-native 中的 FlatList，它便是一个 PureComponent。可以使用 concat 来触发更新。

memo

memo 是一个新的组件，它会将 component 缓存到内存中，在下一次的使用中避免再次渲染。它使用的是函数式组件而非 class 式。它与 PureComponent 类似，给定相同的 state 和 props 会渲染相同的结果，而且通过浅对比来实施更新。不过你可以设置单独的对比函数作为 memo 的第二个参数。

React.lazy、React.suspense

React.lazy 和 React.suspense 配合使用，可以给异步加载的组件一个 loading 提示框。给 React.suspense 添加 fallback 属性来添加 loading 提示框。

Ref

每次在使用 ref 的时候可以好好考虑下是否真的需要使用 ref。有很多时候我们是可以传递 props 来替换 ref。

以后可能不需要创建 ref，但是现在需要调用 React.createRef Api 来创建 ref，使用 React.forwardRef 来传递 ref。