React 新特性学习

1 context

2 contextType

3 lazy

4 suspense

5 memo

===========

1 Context 提供了一种方式，能够让数据在组件树中传递而不必一级一级手动传递

API： createContext(defaultValue)

示例1:

import React,{ Component,createContext } from 'react';//在这里导出context函数
import logo from './logo.svg';
import './App.css';

const BatteryContext = createContext();//在这里创建context

//孙子组件
class Leaf extends Component {
    render(){
        //在这里定义 consumer 消费者
        return (
            <BatteryContext.Consumer>
            {
                Battery => <h1>BatteryName:{Battery}</h1>
            }
            </BatteryContext.Consumer>
        )
    }
}

//子组件
class Middle extends Component{
    render(){
        return <Leaf/>;
    }
}

//父组件
class App extends Component {
    render(){
        //在这里定义 Provider context的提供者
        return (
            <BatteryContext.Provider value = {60}>
                <Middle/>
            </BatteryContext.Provider>
        )
    }
}
export default App;