react-基础操作（4）hooks和context

2020-03-31

字数统计: 1.1k字 | 阅读时长≈ 5分

源码在我的github地址react-tuts-02

React Hooks

React Hooks是react 16.8新增的一项功能。可以在不编写class的情况下使用state。

两个常见的api，useState和useEffect，需要先引入

useState是一个方法，方法参数是默认值，结果是一个数组，数组的第一个就是state，第二个相当于setState（不一样的地方在于参数，这里的参数是一个新值即可），解构出来数组中的两个值。

useEffect的参数是一个回调，不管是组件挂载还是更新，都会触发这个回调方法，类似于componentDidMount和componentDidUpdate的结合

import React ,{useState, useEffect} from 'react'
import { render } from 'react-dom'


const Counter = () => {
  const [count,setCount] = useState(0)
  //console.log(useState(10))
  // 可以使用多次
  // const [title,setTitle] = useState('abc')
  //console.log(title)

  useEffect(() => {
    console.log('渲染了')
    document.title=`当前的数量为${count}`
  })

  return(
    <div>
      <p>当前的数量为{count}</p>
      <button onClick={() => {setCount(count - 1)}}>-</button>
      <span>{count}</span>
      <button onClick={() => {setCount(count + 1)}}>+</button>
    </div>
  )
}
render(
  <Counter />,
  document.querySelector('#root')
)

context

具体介绍

createContext是react提供的一个用于跨组件传值的方法，这个方法的结果是一个对象，里面有两个组件Provider和Consumer。

Provider用于提供状态

Consumer用于接受状态，

项目目录

src/components/Count1/index.js

import React, { Component } from 'react'
import { CounterConsumer } from '../../counterStore'

//定义一个Count1组件
export default class Count1 extends Component{
    render(){
      return(
        //使用CounterConsumer来接受count，
        <CounterConsumer>
          {
            //注意！！！Consumer的children必须是一个方法，这个方法有一个参数，这个参数就是Provider的value
            ({count})=>{
              return <span>{count}</span>
            }
          }
        </CounterConsumer>
    )}
  }

src/components/CountBtn/index.js

import React, { Component } from 'react'
import { CounterConsumer } from '../../counterStore'

export default class CountBtn extends Component{
    render() {
      return <CounterConsumer>
        {
          ({onincrementCount, ondecrementCount})=>{
            const handler = this.props.type === 'increment' ? onincrementCount : ondecrementCount
            return <button onClick={handler}>{this.props.children}</button>
          }
        }
      </CounterConsumer>
    }
  }

src/components/Counter/index.js

import React, {useState, useEffect } from 'react'

export default function Counter() {
    const [count,setCount] = useState(0)
    //console.log(useState(10))
    // 可以使用多次
    // const [title,setTitle] = useState('abc')
    //console.log(title)
  
    useEffect(() => {
      console.log('渲染了')
      document.title=`当前的数量为${count}`
    })
  
    return(
      <div>
        <p>当前的数量为{count}</p>
        <button onClick={() => {setCount(count - 1)}}>-</button>
        <span>{count}</span>
        <button onClick={() => {setCount(count + 1)}}>+</button>
      </div>
    )
  }

src/components/index.js

1
2
3

export { default as Counter } from './Counter'
export { default as Count1 } from './Count1'
export { default as CountBtn } from './CountBtn'

src/App.js

import React, { Component } from 'react'
import{
    CountBtn,
    Count1,
    Counter
  } from './components'

export default class App extends Component{
  render () {
    return(
    <>
    <Counter />
    <br></br>
    <CountBtn type="decrement">-</CountBtn>
    <Count1 />
    <CountBtn type="increment">+</CountBtn>
    </>
    )}
}

src/counterStore.js

import React,{Component,createContext} from 'react'

//console.log(createContext())
const{
    Provider,
    Consumer: CounterConsumer  //结构出来重新赋值给一个CounterConsumer的组件
  } = createContext()
  
  
//封装一个基本的Provider，因为直接使用Provider不方便管理状态
class CounterProvider extends Component{
    constructor(){
      super()
      //这里的状态就是共享的，任何CounterProvider的后代组件，都可以通过CounterProvider来接受这个值
      this.state={
        count: 100
      }
    }
  
    //这里的方法也会继续通过Provider共享下去
    incrementCount = ()=>{
      this.setState({
        count: this.state.count + 1
      })
    }
    decrementCount = ()=>{
      this.setState({
        count: this.state.count -1
      })
    }
    render(){
      return(
        //使用Provider这个组件，它必须要有一个value，value里可以传递任何的数据，一般还是传递一个比较合理。
        <Provider value={{
          count: this.state.count, 
          //这两个括号意义不同，可以简单的理解为：
          //外面的花括号是说：我这里面写的是js语句
          //内部的花括号是说：我里面的不是要显示的文字，而是变量，我要把变量的值解析放在这
          onincrementCount:this.incrementCount,
          ondecrementCount:this.decrementCount
        }}  >
          {this.props.children}
        </Provider>
      )
    }
  }


  export {
      CounterProvider,
      CounterConsumer
  }

src/index.js

import React from 'react'
import { render } from 'react-dom'
import{ CounterProvider } from './counterStore'
import App from './App'

 



render(
  <CounterProvider>
    <App />
  </CounterProvider>,
  document.querySelector('#root')
)

本文作者： Raphael_Li
本文链接： https://lifei-2019.github.io/react6/
版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！