React 16.0.0 更新的内容 不废话

1. React.PropTypes 被废弃

用‘prop-types’库

// 引入库
npm install 'prop-types' --save

// 组件中使用：
import PropTypes from 'prop-types';

myComponent.propTypes = {
optionalArray: PropTypes.array,    // 数组类型
optionalBool: PropTypes.bool,      // 布尔类型
optionalFunc: PropTypes.func,      // 函数类型
optionalNumber: PropTypes.number,  // 数值类型
optionalObject: PropTypes.object,  // 对象类型
optionalString: PropTypes.string,  // 字符串类型
optionalSymbol: PropTypes.symbol,  // 唯一数类型
optionalNode: PropTypes.node,      // 所有节点类型
optionalElement: PropTypes.element,// 仅HTML元素节点类型
optionalArray: PropTypes.any,      // 任意类型
}

2.React.createClass 被废弃

官方推荐都用ES6 class 的方式创建组件

class myComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return ...
}
}

3. render可返回数组 或 字符串

render() {
return [
<div key='1'>1</div>,
<div key='2'>2</div>,
<div key='3'>3</div>,
];
}
// 注：不要忘了加key

// 也可以直接返回字符串
render() {
return 'Hello World';
}

4.新的生命周期函数：componentDidCatch

错误处理机制，如同try…catch

可以用于捕获子组件的错误，即使子组件有代码报错，也不至于导致整个APP崩溃

官方文档：https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

// 假如有一个子组件Header：
class header extends React.Component {
...
render() {
throw new Error('错误'); // 故意抛出一个错误
return ...
}
}

// 父组件中引用该组件，并配置componentDidCatch:

class myComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
error: false,
};
}

// 这里配置了错误捕捉钩子函数
componentDidCatch(error, info) {
this.setState({
error: true,
});
console.log('捕获到了错误：', error, info);
}

render() {
return (
<div>
// 如果出错就用其他内容代替原组件
{this.state.error ? <p>子组件出错</p> : <Header />}
</div>
);
}
}

5. 接受元素上的自定义属性

<p abc='123'>
// 以前react会忽略abc属性（因为p元素没有abc这个属性），并在控制台抛出一个错误
// 现在会正确的把abc赋加在p标签上

6.新增ReactDOM.createPortal方法

以前一个组件只能被默认的渲染到父级所引用它的地方，

createPortal方法可以把组件自身的内容渲染到任意一个指定的dom元素下

但事件的冒泡仍然会从它原本的父级传递

官方文档：https://reactjs.org/docs/portals.html

// 子组件<Header />:
import React from 'react';
import ReactDom from 'react-dom';

...
render() {
// 用createPortal方法将自身的内容渲染到id='div1'的元素下
return ReactDom.createPortal(
<div>Hello World!</div>,
document.getElementById('div1'),
);
}

// 父组件
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
show: false,
};
}

onTest() {
this.setState({
show: true
});
}

render() {
return (
<div>
// 这里有一个id='div1'的元素
<div id="div1"/>
<hr />
{this.state.show ? <Header /> : null}
// 当点击时就会渲染Header,而Header的内容会出现在div1中
<button onClick={() => this.onTest()}>测试</button>
</div>
);
}
}

其他更新

服务端渲染优化，比以前更好

react和react-dom库文件大小比以前更小

react开源协议为MIT协议