Hooks操作步骤

使用useState

第1步：引入useState

import React,{ useState} from 'react';

第2步：获取useState中的数据

const App = ()=>{
    
	let [value,setValue] = useState('hello')
    
    //修改的函数
    const update = ()=>{
        setValue('world')
    }

	return (
    	<div>
        	{value}
            <button onClick={update}>修改</button>
        </div>
    )
}

使用useEffect

第1步：引入useEffect

import React,{ useEffect } from 'react';

第2步：使用useEffect函数

const App = ()=>{
    
	let [value,setValue] = useState('hello')
    
    //修改的函数
    const update = ()=>{
        setValue('world')
    }
    
    //useEffect函数作为生命周期函数使用
    useEffect(()=>{
        console.log('useEffect....')
    })

	return (
    	<div>
        	{value}
            <button onClick={update}>修改</button>
        </div>
    )
}

使用useReducer

import React,{ useState, useEffect, useLayoutEffect, useReducer } from 'react';
import ReactDOM from 'react-dom';

const defaultState = {
  value: "hello"
}

const reducer = (state,action)=>{

  if(action.type === 'update'){
    let copyState = JSON.parse(JSON.stringify(state))
    copyState.value = action.value
    return copyState
  }

  return state
}

const App = ()=>{

  let [state,dispatch] = useReducer(reducer,defaultState)

  const handleUpdate = ()=>{
      let action = {
         type: 'update',
         value: 'world'
      }
      dispatch(action)
  }

  return (
    <div>

      <button onClick={handleUpdate}>修改</button>

      { state.value }
      
    </div>
  )
}


ReactDOM.render(
  <App />
  ,document.getElementById('root'));

操作useContext

import React,{ useState, createContext, useContext } from 'react';
import ReactDOM from 'react-dom';

//1、创建Context上下文对象
const Context = createContext()

//2、声明根组件APP
const App = ()=>{


  let  [value,setValue] = useState(0)

  //3、在APP组件中需要使用 Context.Provider 管理上下文对象中的数据
  return (
    <Context.Provider value={{value,setValue}}>
      <div>
        <Father></Father>
      </div>
    </Context.Provider>
  )
}

//4、声明父组件，在父组件中获取 Context 上下文对象中的数据
const Father = ()=>{

  let {value,setValue} = useContext(Context)

  const add = ()=>{
    setValue(value+1)
  }

  return (
    <div>
      Father组件：{value} &nbsp;&nbsp; <button onClick={add}>父组件中修改</button>
      <Child></Child>
    </div>
  )
}

//5、声明子组件，在组件中获取 Context 上下文对象的数据
const Child = ()=>{

  let {value,setValue} = useContext(Context)

  const add = ()=>{
    setValue(value+1)
  }

  return (
    <div>
      Child组件：{value} &nbsp;&nbsp;  <button onClick={add}>子组件中修改</button>
    </div>
  )
}

ReactDOM.render(
  <App />
  ,document.getElementById('root'));