React Hooks

useState 的使用

import {useState} from 'react'
function Example(){
//count 为定义的常量量 ，通过setCount对变量进行重新赋值 ，useState('初始值')
	const [count,setCount] = useState(0);
	return (
	<div>
			<p>You clicked {count} tiimes</p>
				<button onClick={()=>setCount(count+1)}>
					更改
				</button>
	</div>
	)
}

useEffect

import Reacr,{useState,useEffect} from 'react'
const [count1,setCount1] = useState(0);
const [count2,setCount2] = useState(0);
//1.当useEffect没有第二个参数时
//不管哪个变量发生变化都会执行
useEffect(()=>{

	console.log('改变')
})
//2.当useEffect第二个参数为空数组时
//不管哪个变量发生变化都会执行， 但是只会执行一次
useEffect(()=>{
	console.log('改变')
},[])

//3.当useEffect第二个参数为变量时
//只有变量发生变化才执行
useEffect(()=>{
	console.log('改变')
},[count])
//任意一个值改变就会触发
useEffect(()=>{
	console.log('改变')
},[count,count2])

return (
	<button onClick={setCount1(count1++)}>count1</button>
	<button onClick={setCount2(count2++)}>count2</button>
)

useEffect 清除:

	useEffect(()=>{
		return ()=>{
			//这里的代码会在组件销毁后执行
		}
	})

useEffect通过进行一些清除

useContext

//父组件
import React,{useState,useContext,createContext} from 'react';

const Context = createConteext(0);


function App(){
	 const [ count, setCount ] = useState(0)
  return (
    <div>
      点击次数: { count } 
      <button onClick={() => { setCount(count + 1)}}>点我</button>
      <Context.Provider value={count}>
        {/* <Item1></Item1>
        <Item2></Item2> */}
        <Item3></Item3>
      </Context.Provider>
    </div>
    )

}
export default App;

//子组件
import React,{useState,useContext,createContext} from 'react';
function(){
const count = useContext(Context);
return (
<div>
	count
</div>
)
}

useReducer

const initialState = {count:0}
function reducers(state,action){
 switch(action.type) {
      case 'add':
        return {...state,count:state.count+1};
      case 'minus':
        return {...state,count:state.count+1}
      default:
        return state
    }
  }

}

function Reducers () {
  const [state,dispatch] = useReducer(reducers,initialState ) 
   
  return (
    <div>
      <div>{state.count}</div>
      <button onClick={() => {dispatch({type: 'add'})}}>加</button>
      <button onClick={() => {dispatch({type: 'minus'})}}>减</button>
    </div>
  )
}
export default Reducers

useContext 与useReducer代替redux

import React ,{  }from 'react';
import { Content } from './content'
import { Color } from './color'
//index页面
export const Index =()=>{
    return(
        <div>
              {/* Color组件作为父组件作为包裹 */}
            <Color>
              {/* 注意父子关系才能使用 */}
                <Content />
            </Color>
            
        </div>
    )
}

//起存储数据的redux页面，父组件
import React ,{ createContext,useReducer } from 'react';
export const Context = createContext({})
 {/* reducer作为变量而不是函数*/}
const reducer = (state,action)=>{
    switch (action.type){
        case 'update_color':
            return action.color
        default :
            return 'purple'
    }
}
export const Color =props=>{
 {/* props是指包含子组件的结构 */}
    const [color,dispatch] = useReducer(reducer,'purple')
    return (
        <Context.Provider value={{color,dispatch}}>
            {props.children}
        </Context.Provider>
    )
}

//操作数据的子组件
import React ,{ useState ,useContext }from 'react';
import { Context } from './color'
export const Content =()=>{
     {/* 这里是对象，不是数组，value是对象 */}
    const {color,dispatch} = useContext(Context)
    return(
        <div>
            <p style={{color:color}}>字体颜色是：{color}</p>
            <button onClick={()=>{dispatch({type:'update_color',color:'green'})}}>green</button>&nbsp;
            <button onClick={()=>{dispatch({type:'update_color',color:'red'})}}>red</button>
        </div>
    )
}

多个useReducer的合并：https://blog.youkuaiyun.com/mkymab/article/details/113482467

useCallback(记忆函数体)

useMemo(记忆计算结果)

useRef
useImperativeMethods
useMutationEffect
useLayoutEffect