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>
    );
  }
}

其他更新

  1. 服务端渲染优化,比以前更好
  2. react和react-dom库文件大小比以前更小
  3. react开源协议为MIT协议
已标记关键词 清除标记
相关推荐
<p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <br /> </p> <p> <br /> </p> <p> 本课程内容包含讲解<span>解读Nginx基础知识,</span><span>解读Nginx核心知识、带领学员进行</span>高并发环境下Nginx性能优化实战,让学生能够快速将所学融合到企业应用中。 </p> <p> <br /> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><br /> </b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"><span id="__kindeditor_bookmark_start_21__"></span></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <strong><span style="background-color:#FFE500;">【学员专享增值服务】</span></strong> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b>源码开放</b> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化 </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 下载方式:电脑登录<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a>,播放页面右侧点击课件进行资料打包下载 </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页