React-到hook之前的过渡技术

---

过渡技术

无用的渲染

组件是构成React视图的一个基本单元。有些组件会有自己本地的状态(state), 当它们的值由于用户的操作而发生改变时，组件就会重新渲染。在一个React应用中，一个组件可能会被频繁地进行渲染。这些渲染虽然有一小部分是必须的，不过大多数都是无用的，它们的存在会大大降低我们应用的性能

解决无用的渲染

React核心开发团队一直都努力地让React变得更快。在React中可以用来优化组件性能的方法大概有以下几种:

• 组件懒加载: React.lazy(…) 和 < Suspense />

• Pure Component

• shouldComponentUpdate(…){…}生命周期函数

React16.6加入的另外一个专门用来优化函数组件(Functional Component)性能的方法: React.memo
React.memo()使用场景就是纯函数组件频繁渲染props

shouldComponentUpdate

//为了避免React组件的无用渲染，我们可以实现自己的shouldComponentUpdate生命周期函数。
//当React想要渲染一个组件的时候，它将会调用这个组件的shouldComponentUpdate函数, 这个函数会告诉它是不是真的要渲染这个组件。
shouldComponentUpdate(nextProps, nextState) {
    return true        
}
shouldComponentUpdate(nextProps, nextState) {
    return false
}

//其中各个参数的含义是：
//nextProps: 组件将会接收的下一个参数props
//nextState: 组件的下一个状态state
//shouldComponentUpdate函数一直返回true，这就告诉React，无论何种情况都要重新渲染该组件。
//这个方法的返回值是false，React永远都不会重新渲染我们的组件。

Pure Component

React在v15.5的时候引入了Pure Component组件。React在进行组件更新时，如果发现这个组件是一个PureComponent，它会将组件现在的state和props和其下一个state和props进行浅比较，如果它们的值没有变化，就不会进行更新。要想让你的组件成为Pure Component，只需要extends React.PureComponent

React.memo

React.memo()是React v16.6引进来的新属性。它的作用和React.PureComponent类似，是用来控制函数组件的重新渲染的。React.memo(…)其实就是函数组件的React.PureComponent

语法

const Funcomponent = ()=> {
    return (
        <div>
           I am a Funtional component
        </div>
    )
}
const MemodFuncComponent = React.memo(FunComponent)
//React.memo会返回一个纯化的组件MemoFuncComponent，这个组件将会在JSX标记中渲染出来。当组件的参数props和状态state发生改变时，React将会检查前一个状态和参数是否和下一个状态和参数是否相同，如果相同，组件将不会被渲染，如果不同，组件将会被重新渲染。

context

Context 通过组件树提供了一个传递数据的方法（类似一个简易的redux来存放公共数据），从而避免了在每一个层级手动的传递 props 属性。

使用场景：当你不想在组件树中通过逐层传递props或者state的方式来传递数据时，可以使用Context来实现跨层级的组件数据传递

如何使用Context

如果要Context发挥作用，需要用到两种组件，一个是Context生产者(Provider)，通常是一个父节点，另外是一个Context的消费者，通常是一个或者多个子节点。所以Context的使用基于生产者消费者模式。

对于父组件，也就是Context生产者，需要通过一个静态属性childContextTypes声明提供给子组件的Context对象的属性，并实现一个实例getChildContext方法，返回一个代表Context的纯对象 。

import React from 'react';
const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});
export default ThemeContext;
//通过静态方法React.createContext()创建一个Context对象，这个Context对象包含两个组件，<Provider />和<Consumer />

import React from 'react';
import ThemeContext from './ThemeContext.js';
import Header from './Header.js';
class App extends React.Component {
  render () {
    return (
      <ThemeContext.Provider value={{background: 'green', color: 'white'}}>
        <Header />
      </ThemeContext.Provider>
    );
  }
}	

import React from 'react';
import Title from './Title.js';
class Header extends React.Component {
  render () {
    return (
      <Title>Hello React Context API</Title>
    );
  }
}
export default Header;

import React from 'react';
import ThemeContext from './ThemeContext.js';
class Title extends React.Component {
  render () {
    return (
      <ThemeContext.Consumer>
        {context => (
          <h1 style={{background: context.background, color: context.color}}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}
Title.contextType = ThemeContext
export default Title;

//<Consumer />的children必须是一个函数，通过函数的参数获取<Provider />提供的Context

可以直接获取Context的地方

注意:接受值的后代组件名.contextType = ThemeContext

实际上，除了实例的context属性(this.context)，React组件还有很多个地方可以直接访问父组件提供的Context

类组件:

• constructor(props, context)

• componentWillReceiveProps(nextProps, nextContext)

• shouldComponentUpdate(nextProps, nextState, nextContext)

• componetWillUpdate(nextProps, nextState, nextContext)

• 所有能访问this的地方都可以==>this.context

无状态的函数组件:

const StatelessComponent = (props, context) => (

)