React16 新特性总结
createPortal
createPortal 的出现为 弹窗、对话框 等脱离文档流的组件开发提供了便利，Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。
const modalRoot = document.body;
class Modal extends React.Component {
constructor(props) {
super(props);
this.el = document.createElement('div');
}
componentDidMount() {
modalRoot.appendChild(this.el);
}
componentWillUnmount() {
modalRoot.removeChild(this.el);
}
render() {
return ReactDOM.createPortal(
this.props.children,
this.el,
);
}
}
render方法新增返回类型
render方法支持直接返回string，number，boolean，null，portal，以及fragments(带有key属性的数组)，这可以在一定程度上减少页面的DOM层级
// 不需要再将元素作为子元素装载到根元素下面
render() {
return [
一步 01,
一步 02,
一步 03,
一步 04
];
}
新的组件生命周期钩子
static getDerivedStateFromProps(nextProps, prevState)
static静态方法，在es5中这么实现：
function Person() {}
Person.getCount = function () {}
以上就是static静态方法的原理。由于“this”只能获取属性是根据原型链，而静态方法不在原型链上，所以，在组件实例内无通过this调用static方法，static方法也无法根据"this"调用实例的其他方法。
静态方法和动态方法区别
static getDerivedStateFromProps(nextProps, prevState) {
const {type} = nextProps;
// 当传入的type发生变化的时候，更新state
if (type !== prevState.type) {
return {
type,
};
}
// 否则，对于state不进行任何操作
return null;
}
// 你可能会用以下这样做，虽然这样做看起来也没问题，用上面的方法更加安全，不会对this做误操作
componentWillReceiveProps (nextProps) {
if (this.state.name !== nextProps.name) {
this.setState({
name: nextProps.name
});
}
}
componentDidCatch(error, info)
如果错误在组件的渲染或者生命周期方法中被抛出，则会触发该函数。
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
this.setState({ hasError: true });
}
render() {
if (this.state.hasError) {
return Something went wrong.
;
}
return this.props.children;
}
}
然后在顶部或任何地方，你可以这样使用它
性能方面
lazy / Suspense
React.lazy() 提供了动态 import 组件的能力，实现代码分割。
Suspense 作用是在等待组件时 suspend（暂停）渲染，并显示加载标识。
import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
Loading... React.Fragments
如果不喜欢写数组呢，可以使用这个（简写<>），这样并不会在DOM中增加额外节点，相当于 render 返回数组元素。
return (
一步 01
一步 02
一步 03
一步 04
);
ref
React16中有两种创建Ref的方法
constructor () {
this.inputNameRef = React.createRef();
this.switchRef = React.createRef();
}
render () {
// 通过this.inputNameRef.current 可以获取到input实例
return (
render () {
// 通过回调ref的方式实现
// 通过this.inputNameRef 可以获取到input实例
// this.switchRef可以获取Switch的实例
return (
this.inputNameRef = ref} />
this.switchRef = ref} />
)
}
hooks
useState
// 传入初始值，作为 state
const [state, setState] = useState(initialState)
// `惰性初始 state`；传入函数，由函数计算出的值作为 state
// 此函数只在初始渲染时被调用
const [state, setState] = useState(() => {
const initialState = someExpensiveComputation(props)
return initialState
})
useEffect
- Effect Hook 可以让你在函数组件中执行副作用操作，数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。
- React 会等待浏览器完成画面渲染之后才会延迟调用 useEffect，传递给 useEffect 的函数在每次渲染中都会有所不同，我们可以在 effect 中获取最新的 count 的值，而不用担心其过期
- 每个 effect 都可以返回一个清除函数， React 会在组件卸载的时候执行清除操作， useEffect 默认就会在调用一个新的 effect 之前对前一个 effect 进行清理。
- 如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可，如果你要使用此优化方式，请确保数组中包含了所有外部作用域中会随时间变化并且在 effect 中使用的变量，否则你的代码会引用到先前渲染中的旧变量
- 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）
以下就是一个创建订阅的例子：
useEffect(() => {
const subscription = props.source.subscribe()
return () => {
// 清除订阅
subscription.unsubscribe()
}
}, [依赖])
规则
不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。
（*推荐启用 eslint-plugin-react-hooks 的 ESLint 插件）
useMemo和useCallback
useCallback和useMemo的参数跟useEffect一致，他们之间最大的区别有是useEffect会用于处理副作用，而前两个hooks不能。
useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值，useMemo返回缓存的变量，useCallback返回缓存的函数。
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);