React新特性

2019-03-20 本文已影响0人做最棒的

1、React新特性介绍

React v16.0

render 支持返回数组和字符串、Error Boundaries、createPortal、支持自定义 DOM 属性、减少文件体积、fiber；

React v16.1

react-call-return；

React v16.2

Fragment；

React v16.3

createContext、createRef、forwardRef、生命周期函数的更新、Strict Mode；

React v16.4

Pointer Events、update getDerivedStateFromProps；

React v16.5

Profiler；

React v16.6

memo、lazy、Suspense、static contextType、static getDerivedStateFromError()；

React v16.7（~Q1 2019）

Hooks；

React v16.8（~Q2 2019）

Concurrent Rendering；

React v16.9（~mid 2019）

Suspense for Data Fetching；

2、精读

React v16.0

render方法支持直接返回string，number，boolean，null，portal，以及fragments(带有key属性的数组)，这可以在一定程度上减少页面的DOM层级

//string
render(){
    return 'hello,world'
}

//number
render(){
    return 12345
}

//boolean
render(){
    return isTrue?true:false
}

//null
render(){
    return null
}

//fragments，未加key标识符，控制台会出现warning
render(){
    return [
        <div>hello</div>,
        <span>world</span>,
        <p>oh</p>
    ]
}

使用Error Boundary处理错误组件

//最佳实践：将ErrorBoundary抽象为一个公用的组件类

import React, { Component } from 'react'

export default class ErrorBoundary extends Component {
    constructor(props) {
        super(props)
        this.state = { hasError: false }
    }
    componentDidCatch(err, info) {
        this.setState({ hasError: true })
        //sendErrorReport(err,info)
    }
    render(){
        if(this.state.hasError){
            return <div>Something went wrong!</div>
        }
        return this.props.children
    }
}

我们可以在容易出错的组件外使用ErrorBoundary将它包裹起来，如下

//使用方式
render(){
    return (
        <div>
            <ErrorBoundary>
                <Profile user={this.state.user} />
            </ErrorBoundary>
            <button onClick={this.onClick}>Update</button>
        </div>
    )
}

使用createPortal将组件渲染到当前组件树之外

Portals机制提供了一种最直接的方式可以把一个子组件渲染到父组件渲染的DOM树之外。默认情况下，React组件树和DOM树是完全对应的，因此对于一些Modal,Overlay之类的组件，通常是将它们放在顶层，但逻辑上它们可能只是属于某个子组件，不利于组件的代码组织。通过使用createPortal，我们可以将组件渲染到我们想要的任意DOM节点中，但该组件依然处在React的父组件之内。带来的一个特性就是，在子组件产生的event依然可以被React父组件捕获，但在DOM结构中，它却不是你的父组件。对于组件组织，代码切割来说，这是一个很好的属性。

//实现一个简易蒙层效果，抽象出一个通用的Overlay组件
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Overlay extends Component {
    constructor(props) {
        super(props);
        this.container = document.createElement('div');
        document.body.appendChild(this.container);
    }
    componentWillUnmount() {
        document.body.removeChild(this.container);
    }
    render() {
        return ReactDOM.createPortal(
            <div className='overlay'>
                <span className='overlay-close' onClick={this.props.onClose}>&times;</span>
                {this.props.children}
            </div>,
            this.container
        )
    }
}
//该组件对应的样式如下
.overlay{
    box-sizing:border-box;
    position: fixed;
    top:50%;
    left:50%;
    width:260px;
    height:200px;
    margin-left:-130px;
    margin-top:-100px;
    padding:10px;
    background-color: #fff;
    outline: rgba(0,0,0,.5) solid 9999px;
}
.overlay-close{
    position: absolute;
    top:10px;
    right:10px;
    color:red;
    cursor: pointer;
}

使用方式如下：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      overlayActive: false
    }
    this.closeOverlay = this.closeOverlay.bind(this);
    this.showOverlay = this.showOverlay.bind(this);
  }
  closeOverlay() {
    this.setState({ overlayActive: false })
  }
  showOverlay() {
    this.setState({ overlayActive: true })
  }
  render() {
    return (
      <div className="App">
        <div>hello world!</div>
        {this.state.overlayActive &&
          <Overlay onClose={this.closeOverlay}>overlay content</Overlay>}
        <button onClick={this.showOverlay}>show</button>
      </div>
    );
  }
}

效果如图：

支持自定义DOM属性

在之前的版本中，React会忽略无法识别的HTML和SVG属性，自定义属性只能通过data-*形式添加，现在它会把这些属性直接传递给DOM（这个改动让React可以去掉属性白名单，从而减少了文件大小），不过有些写法仍然是无效的。如DOM传递的自定义属性是函数类型或event handler时，依然会被React忽略。

//错误写法
render(){
    return(
        <div a={()=>{}} onclick={this.showOverlay}></div>
    )
)
//Warning: Invalid event handler property `onclick`. Did you mean `onClick`?
//Warning: Invalid value for prop `a` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.

现在class和tabindex等属性可以被传递给DOM，但依然会报一个Warning，建议使用标准的驼峰式className,tabIndex等。

setState传入null时不会再触发更新

比如在一个选择城市的函数中，当点击某个城市时，newValue的值可能发生改变，也可能是点击了原来的城市，值没有变化，返回null则可以直接避免触发更新，不会引起重复渲染，不需要在shouldComponentUpdate函数里面去判断

selectCity(e){
    const newValue = e.target.value;
    this.setState((state)=>{
        if(state.city===newValue){
            return null;
        }
        return {city:newValue}
    })
)

注意：现在setState回调（第二个参数）会在componentDidMount/componentDidUpdate后立即触发，而不是等到所有组件渲染完成之后

减少文件体积

新的打包策略中去掉了process.env检查。
React 16的体积比上个版本减小了32%（30% post-gzip），文件尺寸的减小一部分要归功于打包方法的改变。

fiber

后期在深入学习他的源码，讲解

React v16.1

Call Return（react-call-return npm）

react-call-return 目前还是一个独立的 npm 包，主要是针对父组件需要根据子组件的回调信息去渲染子组件场景提供的解决方案。

在 React16 之前，针对上述场景一般有两个解决方案：

首先让子组件初始化渲染，通过回调函数把信息传给父组件，父组件完成处理后更新子组件 props，触发子组件的第二次渲染才可以解决，子组件需要经过两次渲染周期，可能会造成渲染的抖动或闪烁等问题；
首先在父组件通过 children 获得子组件并读取其信息，利用 React.cloneElement 克隆产生新元素，并将新的属性传递进去，父组件 render 返回的是克隆产生的子元素。虽然这种方法只需要使用一个生命周期，但是父组件的代码编写会比较麻烦；

React16 支持的 react-call-return，提供了两个函数 unstable_createCall 和 unstable_createReturn，其中 unstable_createCall 是父组件使用，unstable_createReturn 是子组件使用，父组件发出 Call，子组件响应这个 Call，即 Return。

在父组件 render 函数中返回对 unstable_createCall 的调用，第一个参数是 props.children，第二个参数是一个回调函数，用于接受子组件响应 Call 所返回的信息，第三个参数是 props；
在子组件 render 函数返回对 unstable_createReturn 的调用，参数是一个对象，这个对象会在unstable_createCall 第二个回调函数参数中访问到；
当父组件下的所有子组件都完成渲染周期后，由于子组件返回的是对 unstablecreateReturn 的调用所以并没有渲染元素，unstablecreateCall 的第二个回调函数参数会被调用，这个回调函数返回的是真正渲染子组件的元素；

针对普通场景来说，react-call-return 有点过度设计的感觉，但是如果针对一些特定场景的话，它的作用还是非常明显，比如，在渲染瀑布流布局时，利用 react-call-return 可以先缓存子组件的 ReactElement，等必要的信息足够之后父组件再触发 render，完成渲染。

import React from 'react';
import { unstable_createReturn, unstable_createCall } from 'react-call-return';

const Child = (props) => {
  return unstable_createReturn({
    size: props.children.length,
    renderItem: (partSize, totalSize) => {
      return <div>{ props.children } { partSize } / { totalSize }</div>;
    }
  });
};

const Parent = (props) => {
  return (
    <div>
      {
        unstable_createCall(
          props.children,
          (props, returnValues) => {
            const totalSize = returnValues.map(v => v.size).reduce((a, b) => a + b, 0);
            return returnValues.map(({ size, renderItem }) => {
              return renderItem(size, totalSize);
            });
          },
          props
        )
      }
    </div>
  );
};

React v16.2

Fragment

Fragment 组件其作用是可以将一些子元素添加到 DOM tree 上且不需要为这些元素提供额外的父节点，相当于 render 返回数组元素。

render() {
  return (
    <Fragment>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </Fragment>
  );
}

React v16.2

createContext

不提倡使用，也不讲，只举例
全新的 Context API 可以很容易穿透组件而无副作用，其包含三部分：React.createContext，Provider，Consumer。

React.createContext 是一个函数，它接收初始值并返回带有 Provider 和 Consumer 组件的对象；
Provider 组件是数据的发布方，一般在组件树的上层并接收一个数据的初始值；
Consumer 组件是数据的订阅方，它的 props.children 是一个函数，接收被发布的数据，并且返回 React Element；

const ThemeContext = React.createContext('light');

class ThemeProvider extends React.Component {
  state = {theme: 'light'};

  render() {
    return (
      <ThemeContext.Provider value={this.state.theme}>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

class ThemedButton extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {theme => <Button theme={theme} />}
      </ThemeContext.Consumer>
    );
  }
}

createRef / forwardRef

React16 规范了 Ref 的获取方式，通过 React.createRef 取得 Ref 对象。

// before React 16
···

  componentDidMount() {
    const el = this.refs.myRef
  }

  render() {
    return <div ref="myRef" />
  }

···

// React 16+
  constructor(props) {
    super(props)
    
    this.myRef = React.createRef()
  }

  render() {
    return <div ref={this.myRef} />
  }
···

React.forwardRef 是 Ref 的转发, 它能够让父组件访问到子组件的 Ref，从而操作子组件的 DOM。 React.forwardRef 接收一个函数，函数参数有 props 和 ref。

const TextInput = React.forwardRef((props, ref) => (
  <input type="text" placeholder="Hello forwardRef" ref={ref} />
))

const inputRef = React.createRef()

class App extends Component {
  constructor(props) {
    super(props)
    
    this.myRef = React.createRef()
  }

  handleSubmit = event => {
    event.preventDefault()
    
    alert('input value is:' + inputRef.current.value)
  }
  
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <TextInput ref={inputRef} />
        <button type="submit">Submit</button>
      </form>
    )
  }
}

生命周期函数的更新

React16 采用了新的内核架构 Fiber，Fiber 将组件更新分为两个阶段：Render Parse 和 Commit Parse，因此 React 也引入了 getDerivedStateFromProps 、 getSnapshotBeforeUpdate 及 componentDidCatch 等三个全新的生命周期函数。同时也将 componentWillMount、componentWillReceiveProps 和 componentWillUpdate 标记为不安全的方法。

static getDerivedStateFromProps(nextProps, prevState)

getDerivedStateFromProps(nextProps, prevState) 其作用是根据传递的 props 来更新 state。它的一大特点是无副作用，由于处在 Render Phase 阶段，所以在每次的更新都会触发该函数，在 API 设计上采用了静态方法，使其无法访问实例、无法通过 ref 访问到 DOM 对象等，保证了该函数的纯粹高效。

为了配合未来的 React 异步渲染机制，React v16.4 对 getDerivedStateFromProps 做了一些改变，使其不仅在 props 更新时会被调用，setState 时也会被触发。

如果改变 props 的同时，有副作用的产生，这时应该使用 componentDidUpdate；
如果想要根据 props 计算属性，应该考虑将结果 memoization 化；
如果想要根据 props 变化来重置某些状态，应该考虑使用受控组件

static getDerivedStateFromProps(props, state) {
  if (props.value !== state.controlledValue) {
    return {
      controlledValue: props.value,
    };
  }
  
  return null;
}

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate(prevProps, prevState) 会在组件更新之前获取一个 snapshot，并可以将计算得的值或从 DOM 得到的信息传递到 componentDidUpdate(prevProps, prevState, snapshot) 函数的第三个参数，常常用于 scroll 位置定位等场景。

componentDidCatch(error, info)

componentDidCatch 函数让开发者可以自主处理错误信息，诸如错误展示，上报错误等，用户可以创建自己的 Error Boundary 来捕获错误。

componentWillMount(nextProps, nextState)

componentWillMount 被标记为不安全，因为在 componentWillMount 中获取异步数据或进行事件订阅等操作会产生一些问题，比如无法保证在 componentWillUnmount 中取消掉相应的事件订阅，或者导致多次重复获取异步数据等问题。

componentWillReceiveProps(nextProps) / componentWillUpdate(nextProps, nextState)

componentWillReceiveProps / componentWillUpdate 被标记为不安全，主要是因为操作 props 引起的 re-render 问题，并且对 DOM 的更新操作也可能导致重新渲染。

Strict Mode

StrictMode 可以在开发阶段开启严格模式，发现应用存在的潜在问题，提升应用的健壮性，其主要能检测下列问题：

识别被标志位不安全的生命周期函数
对弃用的 API 进行警告
探测某些产生副作用的方法
检测是否使用 findDOMNode
检测是否采用了老的 Context API

class App extends React.Component {
  render() {
    return (
      <div>
        <React.StrictMode>
          <ComponentA />
        </React.StrictMode>
      </div>
    )
  }
}

React新特性

1、React新特性介绍

React v16.0

React v16.1

React v16.2

React v16.3

React v16.4

React v16.5

React v16.6

React v16.7（~Q1 2019）

React v16.8（~Q2 2019）

React v16.9（~mid 2019）

2、精读

React v16.0

render方法支持直接返回string，number，boolean，null，portal，以及fragments(带有key属性的数组)，这可以在一定程度上减少页面的DOM层级

使用Error Boundary处理错误组件

使用createPortal将组件渲染到当前组件树之外

支持自定义DOM属性

setState传入null时不会再触发更新

减少文件体积

fiber

React v16.1

Call Return（react-call-return npm）

React v16.2

Fragment

React v16.2

createContext

createRef / forwardRef

生命周期函数的更新

static getDerivedStateFromProps(nextProps, prevState)

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidCatch(error, info)

componentWillMount(nextProps, nextState)

componentWillReceiveProps(nextProps) / componentWillUpdate(nextProps, nextState)

Strict Mode

猜你喜欢

热点阅读