React 16.0.0 更新的内容 不废话
发布时间:2020-12-15 06:46:05 所属栏目:百科 来源:网络整理
导读:1. React.PropTypes 被废弃 用‘prop-types’库 // 引入库 npm install 'prop-types' --save // 组件中使用: import PropTypes from 'prop-types' ;myComponent.propTypes = { optionalArray: PropTypes.array, // 数组类型 optionalBool: PropTypes. bool
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 // 假如有一个子组件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方法以前一个组件只能被默认的渲染到父级所引用它的地方, // 子组件<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>
);
}
}
其他更新
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |