前言
这里将列出react16所有新特性。我觉得重要的：
1、render 支持返回数组和字符串
2、新生命周期getDerivedStateFromProps，getSnapshotBeforeUpate
3、createPortal，modal传送到任意位置
4、新增指针事件
5、给函数式组件加memo，实现性能优化
6、懒加载组件，lazy, suspense
7、react hooks
1、render 支持返回数组和字符串
class Example extends React.Component {
render() {
return [
first element,
second element,
];
}
}
2、Error Boundary（错误边界）
包裹在组件外，组件出错，可以抛出异常，但是不会让页面白屏。
3、createPortal
ReactDOM.createPortal(
// Any valid React child: JSX, strings, arrays, etc.
this.props.children,
// A DOM element
this.el,
)
传送门，通过createPortal生成的组件，可以任意定义你需要放的位置。比如弹框放在body上面，就可以document.body..appendChild(this.el)。
4、自定义属性
ReactDOM.render(
Hello, world!
,
document.getElementById("root")
);
custom就是自定义的属性，以前的有白名单的，自定义就抛错。
5、优化SSR
- 生成更简洁的HTML
- 宽松的客户端一致性校验
- 无需提前编译
- react 16服务端渲染速度更快
- 支持流式渲染
6、Fiber：react对于对比更新的一种新算法，它影响着生命周期函数的变化跟异步渲染。学习地址
7、 Fragement：可以通过Fragement直接返回多个组件，好处是有时间我们不想用div，但是不得不用导致嵌套过深。
render() {
return (
<>
或者
render() {
return (
1
2
);
}
8、新的生命周期（新算法导致生命周期更改）
抛弃并兼容：componentWillMount, componentWillReceiveProps,componentWillUpdate
1、getDerivedStateFromProps替换componentWillReceiveProps
2、getSnapshotBeforeUpate替代componentWillUpdate
9、新的context API：全局变量，不需要向之前一样传递下去
const ThemeContext = React.createContext('light');
class App extends React.Component {
render() {
return (
);
}
}
class Toolbar extends React.Component {
static contextType = ThemeContext;
render() {
return ;
}
}
10、createRef API：refs扩展
react16之前：
this.textInput = element} />
react16：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
render() {
return ;
}
componentDidMount() {
this.inputRef.current.focus();
}
}
11、forwardRef API： 父组件需要将自己的引用传给子组件，自行研究吧，个人不喜欢用。
12、strictMode component：严格模式用来帮助开发者发现潜在问题的工具
- 识别出使用不安全生命周期的组件
- 对使用string ref进行告警
- 对使用findDOMNode进行告警
- 探测某些产生副作用的方法
- 对使用弃用context API进行警告
function ExampleApplication() {
return (
);
}
13、新增指针事件（鼠标，触控笔，或者手指触摸）
- onPointerDown
- onPointerMove
- onPointerEnter
- onPointerLeave
- onPointerOver
- onPointerOut
14、React Profiler：谷歌插件下载即可，可以检测到组件渲染耗时。
15、memo
import React, { memo } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function Demo(props) {
console.log("render");
return {props.name};
}
const Demo1 = memo(function Demo(props) {
console.log("render");
return {props.name};
});
class App extends React.Component {
state = { count: 0 };
handleClick = () => {
this.setState({ count: 1 });
};
render() {
return (
Hello Memo
在你的函数前面加Memo就可以像PureComponent实现shouldComponentUpdate优化渲染功能。
16、lazy、suspense
// 需要用到的时候才加载进来，当然还有预加载更好
const B = lazy(() => import("./B"));
Loading...