关于react.js:react-高阶使用

非受控组件

无奈应用 setState 取得想要的后果时应用非受控组件，比方文件上传

Portal

作用：让组件渲染到父组件以外

应用场景：

• overflow: hidden
• 父组件 z-index 值太小
• fixed 放在 body 的第一层级

ReactDOM.createPortal(<div className="modal">{this.props.children}</div>,
  document.body
);

Context

const ThemeContext = React.createContext('light')

<ThemeContext.Provider value={this.state.theme}>
    <A />
</ThemeContext.Provider>

// class 组件：A 组件
class A extends React.Component {
    // static contextType = ThemeContext   等价于上面的 A.contextType = ThemeContext
    render() {
        const theme = this.context  // React 会往上找最近的 theme Provider
        return <div>{theme}</div>
    }
}
A.contextType = ThemeContext  // 指定 contextType 读取以后的 ThemeContext

// 函数组件：B 组件
function B = () => {
    // 函数组件没有 this.context
    // 函数组件通过能够应用 ThemeContext.Consumer
    return <ThemeContext.Consumer>
        {value => {value}}
    </ThemeContext.Consumer>
}

异步组件

const A = React.lazy(() => import("./A"))

// 应用异步组件时，可能会有期待的一些状况，就能够应用 React.Suspense, fallback 能够传入 loading 组件
<React.Suspense fallback={<div>loading...</div>}>
    <A />
</React.Suspense>

性能优化

react 默认父组件有更新，子组件无条件更新

shouldComponentUpdate 默认返回 true

shouldComponentUpdate(nextProps, nextState) {if(nextState.count !== this.setState.count) {return true  // 能够渲染}
    return false   // 不反复渲染
}

PureComponent 和 memo 实现了 shouldComponentUpdate 浅比拟

class 组件应用 PureComponent，函数组件应用 memo

memo 应用

function A(props) {// 应用 props 渲染}

function areEqual(prevProps, nextProps) {
  /*
   * 如果把 nextProps 传入 render 办法的返回后果与将 prevProps 传入 render 办法的返回后果统一则返回 true，否则返回 false
   */
}

React.memo(a, areEqual);

高阶组件

// 高阶组件不是一种性能，而是一种模式
const HOCFactory = (Component) => {
  class HOC extends React.Component {
    // 在此定义多个组件的公共逻辑
    render() {return <Component {...this.props} />;
    }
  }
  return HOC;
};
const EnhancedComponent1 = HOCFactory(WrapperComponent);

Render Props

// Render Props 的核心思想
// 通过一个函数将 class 组件的 state 作为 props 传递给纯函数组件
class Factory extends React.Component {constructor() {
    this.state = {// state 即多个组件的公共逻辑数据};
  }

  // 批改 state
  render() {return <div>{this.props.render(this.state)}</div>;
  }
}

const App = () => {
  <Factory
    render={
      /* render 是个函数组件 */
      (props) => (
        <p>
          {props.a}
          {props.b}
          ...
        </p>
      )
    }
  />;
};