React新的特性学习笔记

2019-07-07

本篇记录一下关于React新的特性的学习笔记

React Context

Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。

Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据。

Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用,因为这会使得组件的复用性变差。

Context的使用基于生产者消费者模式,Context会派发出两种组件,一种是生产者(Provider)另一种是消费者(Consumer)

import React, { Component, createContext } from 'react'
import './App.css';

const myContext = createContext()

class Header extends Component {
  render() {
    return (
      <myContext.Consumer>
        {
          myValue => <h1>myValue:{myValue}</h1>
        }
      </myContext.Consumer>
    )
  }
}

class Page extends Component {
  render() {
    return (
      <Header/>
    )
  }
}

export default class App extends Component {
  render() {
    return (
      <myContext.Provider value={60}>
        <Page/>
      </myContext.Provider>
    )
  }
}

import React, { Component, createContext } from "react";
import "./App.css";

const myContext = createContext();

class Header extends Component {
  // static 这个类属性来初始化你的 contextType。
  static contextType = myContext;
  render() {
    // this.context 来消费最近 Context 上的那个值
    // 可以在任何生命周期中访问到它,包括 render 函数中。
    const myValue = this.context;
    return <h1>myValue:{myValue}</h1>;
  }
}

class Page extends Component {
  render() {
    return <Header />;
  }
}

export default class App extends Component {
  state = {
    myValue: 30
  };

  render() {
    const { myValue } = this.state;
    return (
      <myContext.Provider value={myValue}>
        <button
          type="button"
          onClick={() => this.setState({ myValue: myValue - 1 })}
        >
          点击
        </button>
        <Page />
      </myContext.Provider>
    );
  }
}

React中lazy和Suspense的使用

React.lazy 函数能让你像渲染常规组件一样处理动态引入(的组件)。 如果组件还没加载完成,我们可以通过Suspense组件来解决加载前的ui控制

import React, { Component, lazy, Suspense } from "react";
import "./App.css";

// 渲染组件时,自动导入About
const About = lazy(() => import("./About.js"));

export default class App extends Component {
  render() {
    return (
      <div>
        <Suspense fallback={<div>loding</div>}>
          <About></About>
        </Suspense>
      </div>
    );
  }
}

错误边界 Error Boundaries

错误边界是一种 React 组件,这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误,并且,它会渲染出备用 UI

如果组件中定义了static getDerivedStateFromError()或者componentDidCatch()这两个生命周期当中的任意一个。使用 static getDerivedStateFromError()渲染备用 UI ,使用 componentDidCatch() 打印错误信息。

import React, { Component, lazy, Suspense } from "react";
import "./App.css";

// 渲染组件时,自动导入About
const About = lazy(() => import("./About.js"));

export default class App extends Component {
  state = {
    hasError: false
  };

  static getDerivedStateFromError() {
    return {
      hasError: true
    };
  }

  render() {
    if (this.state.hasError) {
      return <div>error</div>;
    }
    return (
      <div>
        <Suspense fallback={<div>loding</div>}>
          <About></About>
        </Suspense>
      </div>
    );
  }
}