react-hook

useState的用法

import React, { useState } from 'react';

function Example() {
  const [ count, setCount ] = useState(0)
  const [ age, setAge ] = useState(18)
  return ( 
    <div>
      <p>you click {count} times</p>
      <button onClick={() => {setCount(count+1);setAge(age+1)}}>click me</button>

  <p>年龄{age}</p>
    </div>
  );
}
 
export default Example;

useEffect 代替常用生命周期函数

• 表示 componentDidMonut 和 componentDidUpdate
• useEffect 是异步的，而生命周期函数是同步的

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

function Example() {
  const [ count, setCount ] = useState(0)

  // 表示 componentDidMonut 和 componentDidUpdate
  useEffect(() => {
    console.log(`useEffect=>You clicked ${count} times`)
  })
  return ( 
    <div>
      <p>you click {count} times</p>
      <button onClick={() => {setCount(count+1);setAge(age+1)}}>click me</button>
    </div>
  );
}
 
export default Example;

useEffect 实现componentWillUnmount

function Index() {
  useEffect(() => {
    console.log('来到了 useEffect-Index-component')
    return () => { // 解绑会执行的函数
      console.log('离开了 useEffect-Index-component')
    }
  },[]) // 数组为空表示 当组件销毁时才进行解绑
  return <h2>index-component</h2>
}

  // 表示 componentDidMonut 和 componentDidUpdate
  // useEffect 是异步的，而生命周期函数是同步的
  useEffect(() => {
    console.log(`useEffect=>You clicked ${count} times`)
    return () => {
      console.log('example执行解绑==============')
    }
  },[count]) // 当count 发生变化时，执行解绑

父子组件传值--useContext

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

const CountContext = createContext()

function Counter() {
  const count = useContext(CountContext) // 得到count
return (<h2>{count}</h2>)
}

function Example5() {
  const [ count, setCount ] = useState(0)

  return ( 
    <div>
      <p>you click {count} times</p>
      <button onClick={() => {setCount(count+1)}}>click me</button>

      {/* ===把count 变量允许跨层级传递和使用 */}
      <CountContext.Provider value={count}>
        <Counter />
      </CountContext.Provider>
    </div>
  );
}
 export default Example5;

useReducer基本的使用

import React, { useReducer } from 'react';

function ReducerDemo() {
  const [ count, dispatch ] = useReducer((state,action) => {
    switch(action){
      case 'add':
        return state + 1
      case 'sub':
        return state - 1
      default:
        return state
    }
  },0)// 初始值

  return ( 
    <div>
      <p>现在的分数是 {count}</p>
      <button onClick={()=>{dispatch('add')}}>加法</button>
      <button onClick={()=>{dispatch('sub')}}>减法</button>
    </div>
  );
}
 
export default ReducerDemo;