reactHooks(使用篇)

reactHooks(使用篇)

前些日子看了B站一个UP主的视频，将reactHooks区分为自变量和因变量并说明其中的联系，感触很深，自己打算也来总结一下hoos以及hooks的原理，下面是使用篇

关系

useState

useState是自变量，也就是说可以通过它自己的改变来影响其他的因变量
从useState里取出这两个变量一个用于存放值，另外一个用于设置前者的内容
默认值为useState内填写的内容
用法：

import React, { useState } from 'react';function Example() {// 定义一个 State 变量，变量值可以通过 setCount 来改变const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

useContext

用于处理react层级太多而底层级需要用到顶层级数据的情况

下面是一个list集合的例子
文件目录：

index.js：入口文件

store.js:注册store（注意这不是redux而是单纯的一个全局变量）

list.js：用于展示store中的数据

add.js：用于新增数据

useReducer

用来替代redux的api，创建时存入action state

import React,{useReducer} from 'react'export default function ReducerDemo() {const [count, dispath] = useReducer((state,action)=> {switch(action){case 'add':return state + 1;case 'sub':return state - 1;default:return state;}}, 0);return (<div><h1 className="title">{count}</h1><button className="btn is-primary"onClick={()=> dispath('add')}>Increment</button><button className="btn is-warnning"onClick={()=> dispath('sub')}>Decrement</button></div>)
}

结合 contextAPI即可进行redux操作
其中todosReducer为一个reducer// state和action的函数

const TodosDispatch = ateContext(null);
const TodosState = ateContext(null);function TodosApp() {const [todos, dispatch] = useReducer(todosReducer);return (<TodosDispatch.Provider value={dispatch}><TodosState.Provider value={todos}><DeepTree todos={todos} /></TodosState.Provider></TodosDispatch.Provider>);
}function DeepChild(props) {const dispatch = useContext(TodosDispatch);const todos = useContext(TodosState);function handleClick() {dispatch({ type: 'add', text: 'hello' });}return (<>{todos}<button onClick={handleClick}>Add todo</button></>);
}

useEffect

useEffect是因变量会因为其他内容的改变而改变
同时还会有一些副作用比如可以做一些除了返回之外的操作（/改变title）
使用方式

useMemo

useCallback

二者几乎相同 放在一起一个是存储数据一个是函数
这两个不会有副作用产生 会受其他值的更新而改变
通常用于react性能优化，没有到达性能瓶颈可以不用

useRef

起一个标记的作用不会因为react刷新而丢失

使用方式：（仅有奇数次才会更新）

暂时就写这么多 以后用到了会逐渐补充