react-hooks学习01

使用creat-react-app创建项目

• which npx //查看npx是否已安装
• npx creat-react-app myproject //创建项目

用eject结构编译脚本

• npm run eject

react最新特性简介及context的使用

• Context
• ContextType
• lazy
• Suspense
• memo

1. context提供了一种数据传递方式，可以在组件树之间传递，而不必一级一级手动传递

context工作原理：有一个context实例对象，派生出Provider和Consumer两个组件。

• 单个context的使用

app.js文件中引入context

import { Component, createContext } from 'react' 
const BatteryContext = createContext()

class Middle extends Component {
  render(){
    return <Leaf />
  }
}

class Leaf extends Component {
  render(){
    return (<BatteryContext.Consumer>
      {
        battery => <h1>Battery: {battery}</h1>
      }
    </BatteryContext.Consumer>)
  }
}

class App extends Component {
  state = {
    battery: 60
  }
  minusBattery = () => {
    this.setState({
      battery: this.state.battery-1
    })
  }
  render(){
    const { battery } = this.state
    return (
      <BatteryContext.Provider value={battery}>
        <button type="button" onClick={this.minusBattery}>--</button>
        <Middle></Middle>
      </BatteryContext.Provider>
    );
  }
}

export default App;
复制代码

• 多个context的使用

app.js文件中引入context

import logo from './logo.svg';
import './App.css';
import { Component, createContext } from 'react'
const BatteryContext = createContext()
const OnlineContext = createContext()
class Middle extends Component {
  render() {
    return <Leaf />
  }
}

class Leaf extends Component {
  render() {
    return (<BatteryContext.Consumer>
      {
        battery => (
          <OnlineContext.Consumer>
            {
              online => <h1>battery: {battery} online: {String(online)}</h1>
            }
          </OnlineContext.Consumer>
        )
      }
    </BatteryContext.Consumer>)
  }
}

class App extends Component {
  state = {
    battery: 60,
    online: false
  }
  minusBattery = () => {
    this.setState({
      battery: this.state.battery - 1
    })
  }
  reverseState = () => {
    this.setState({
      online: !this.state.online
    })
  }
  render() {
    const { battery, online } = this.state
    return (
      <BatteryContext.Provider value={battery}>
        <OnlineContext.Provider value={online}>
          <button type="button" onClick={this.minusBattery}>press --</button>
          <button type="button" onClick={this.reverseState}>reverse state</button>
          <Middle></Middle>
        </OnlineContext.Provider>
      </BatteryContext.Provider>
    );
  }
}

export default App;

复制代码

• 假设我们想要在jsx结构之前获得battery的值呢？这时候就需要使用contextype了

这时候cousumer也可以去掉了，更方便

class Leaf extends Component {
  static contextType = BatteryContext
  render() {
    const battery = this.context
    return (
      <h1>battery: {battery}</h1>
    )
  }
}
复制代码