一、react-hooks（useState、useRef、forwardRef）

一、useState

注意事项：

1.setState的方法并不像函数式组件会自动合并，所以需要我们通过展开运算符手动合并。

  // 更新方式1：展开运算符// const info={...userInfo,...data}// setUserInfo(info)// 方式2：setUserInfo(Object.assign({},userInfo))

2.setState中的更新并不能拿到最新的值，如果需要可以通过在useEffect中获取更新后的值。

  但是这里也会有一个问题就是如果setState更新的动作也是在useEffect中操作，那可能也还是拿不到，可能就需要根据具体业务场景解决。

3.更新不及时的问题：

解决方式式通过函数式的方式进行赋值更新。函数体内可以实现想要的代码逻辑赋值，比如加两次等。

    const oddAdd=()=>{// 问题：只会加一次// setCount(count+1)// setCount(count+1)// 解决：setCount (()=>{return  count+1});}

4.useState严禁出现在代码块内，最好写到函数的起始位置方便阅读。

5.实现强制刷新。只需要给useState重新赋一次值即可。

 const [,forceUpdate]=useState({})const onRefresh=()=>{forceUpdate({})}return (<div className="App"><header className="App-header"><button onClick={onRefresh}>点我强制刷新</button></header></div>)

6.异步更改，多个状态的更改会合并，如果不能信任之前的状态，应该使用回调函数的方式改变状态。

二、useRef

作用：1.获取子组件或dom节点的实例对象；

import React,{useRef} from "react";
function App(){const inputRef=useRef(null)const onButtonClick=()=>{if(inputRef){inputRef.current.focus()}}return (<div className="App"><input type="text" ref={inputRef} /><button onClick={onButtonClick}>点击获得焦点</button></div>)
}
export default App;

2.存储渲染周期之间的共享数据

利用useRef获取上一轮的props或状态

import React,{useState,useRef, useEffect} from "react";
function App(){const [count,setCount]=useState(0);// 定义一个ref实例对象const prevCountRef=useRef();// 将prevCountRef实例对象的值赋值给常量prevCountconst prevCount=prevCountRef.current// useEffect中将任意元素中的值等于count的元素绑定为prevCountRef对象useEffect(()=>{(prevCountRef as any).current=count})return (<div className="App"><h1>现在的值：{count};之前的值：{prevCount}</h1><button onClick={()=>setCount((count=>count+1))}>增加</button></div>)}
export default App;

 定时器存入useRef中，定时可id可以在整个组件内使用。（不知道怎么用的其实，没有明白使用场景）

import React,{useState,useRef, useEffect} from "react";
function App(){const intervalRel=useRef('')useEffect(()=>{const id=setInterval(() => {}, 500);intervalRel.current=idconsole.log(intervalRel)return ()=>{clearInterval(intervalRel.current)}})return (<div className="App"><h2>111</h2></div>)}
export default App;

useRef使用注意事项：

1、useRef的每次渲染，返回值都不变

2.ref.current发生拜年话并不会造成重新渲染

3.不可以在render里面更新ref.current的值

4.ref.current的值不可作为其他hooks的依赖项，因为ref是可变的，不会使页面再次渲染，react不会跟踪ref的变化。

5.不要在render函数中更新ref.current的值

三、forwardRef

需求：父组件中获取某个子组件中的input元素，然后设置使input获取焦点。

import React,{useState,useRef,forwardRef, useEffect} from "react";
// 子组件
const Child=forwardRef((props,ref)=>{console.log('props.ref==>',ref)return <><input type="text" placeholder={props.placeholder} ref={ref}/></>
})
// 父组件
function App(){const ref=useRef(null)const [placeholder,setPlaceHolder]=useState('请输入搜索内容')const onClick=()=>{console.log('获取到的子组件内容',ref.current.value)ref.current.focus()}return (<div className="App"><Child ref={ref} placeholder={placeholder}></Child><button onClick={onClick}>获取子组件内容</button></div>)}
export default App;

四、useImperativeHandle

作用：控制ref的暴露颗粒度（----这里的用法优点问题，focus不知道为什么在父组件没有调用成功）

 useImperativeHandle(ref,()=>{return{focus:()=>(ref.current as HTMLInputElement).focus(),// value:(ref.current as HTMLInputElement).current}},[props.value])

五、useEffect

执行时间：组件首次渲染和每次状态更新之后执行，异步执行，此时dom更新完毕，不会阻塞dom渲染。

疑问：如果有一些操作是需要在更新之后请求接口，会出现闪屏问题吧？

注意事项：

1、第二个参数不能是引用类型，因为引用类型比较不出来数据的变化，会造成死循坏，也不推荐在useEffect中更改监听变量的值，即使不是引用类型。

2.useEffect中的清除函数在每次重新渲染的时候都会执行，而不是只在卸载组件的时候执行。

六、useLayoutEffect

执行时间：浏览器渲染之前，需要改变dom，并且需要改变页面样式的

function App(){const [num,setNum]=useState(0)
//    页面不会闪烁useLayoutEffect(()=>{if(num===0){const randomNum=10+Math.random()*200setNum(randomNum)}},[num])return (<div className="App"><div>{num}</div><button onClick={()=>setNum(0)}>点击重新设置值</button></div>)}
export default App;

七、useReducer的使用

import React,{ useReducer} from "react";
import { fromReducer } from "../hooks/reducer/counter.ts";
// 父组件
function App(){// 注册实例const [formData,dispatch]=useReducer(fromReducer,{userName:'',userAge:'',})const onUpdateName=()=>{dispatch({type:'update',data:{userName:'鬼鬼',userAge:'19'}})}return (<div className="App"><div>名称：{formData.userName}</div><div>年龄：{formData.userAge}</div><button onClick={onUpdateName}>更新基本数据</button></div>)}
export default App;

案例：

初始案例代码：使用了useState管理状态

import React,{useState, useReducer, useEffect} from "react";
import { fromReducer } from "../hooks/reducer/counter.ts";
import resolve from "resolve";
// 模拟数据
const mockOrderList=[{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},
]
const defaultPage={count:0,pageSize:10,pageNum:1
}
// 父组件
function App(){// 注册实例
//    const [formData,dispatch]=useReducer(fromReducer,{
//     userName:'',
//     userAge:'',
//    })
// 订单数据const [tableList,setTableList]=useState<any>([]);// 搜索关键词const [queryKey,setQueryKey]=useState('')// 请求状态const [loading,setLoading]=useState(false)const [page,setPage]=useState({...defaultPage})// 模拟查询订单接口const onQueryOrder=(data:any)=>{return new Promise((resolve,reject)=>{// 使用完setimeout后需要清除，以免避免内存浪费const timeObj=setTimeout(() => {resolve({list:mockOrderList,page:{count:mockOrderList.length,pageNum:data.pageNum,pageSize:data.pageSize}})clearTimeout(timeObj)}, 1000);})}const onQuery=()=>{// 首先设置查询状态setLoading(true)// 请求获取数据的接口onQueryOrder({queryKey:queryKey,...page}).then((res:any)=>{console.log(res)// 成功设置会先数据和修改查询状态setTableList(res.list)setPage(res.page)setLoading(false)}).catch(()=>{// 如果失败则清空数据和重置查询状态setTableList([])setPage({...defaultPage})setLoading(false)})}// 重置表单const onReset=()=>{setQueryKey('')onQuery();}useEffect(()=>{onQuery();},[]);return (<div className="App">{/*头部搜索表单  */}<p><input placeholder="请输入搜索关键词" value={queryKey} onChange={(e)=>{setQueryKey(e.target.value)}}></input><button onClick={onQuery}>搜索</button><button onClick={onReset}>重置</button></p>{/* 搜索结果部分 */}<table><thead><tr><th>编号</th><th>商品名称</th><th>订单数量</th><th>用户名称</th></tr></thead><tbody>{tableList&&tableList.map((item:any,index:number)=>{return <tr key={index}><td>{index+1}</td><td>{item.title}</td><td>{item.num}</td><td>{item.userName}</td></tr>})}</tbody></table>{/* 表单分页部分 */}<p>当前分页信息：一共{page.count}；每页：{page.pageSize}；当前第：{page.pageNum}</p><p>当前状态：{loading?'加载中':'加载完成'}</p></div>)}
export default App;

改造：使用reducer管理状态

注意事项：如果数据是数组对象，建议使用reducer管理，如果业务逻辑复杂，变化多，建议使用reducer.

import React,{useState, useReducer, useEffect} from "react";
// 模拟数据
const mockOrderList=[{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},{title:'苹果手机6s',num:10,userName:'鬼鬼'},
]
const defaultPage={count:0,pageSize:10,pageNum:1
}
// 订单状态管理reducer
const orderReducer=(state:any,action:any)=>{switch (action.type){case 'query':return {...state,tableList:[],loading:true}case 'success':return {tableList:action.tableList,page:action.page,loading:false}case 'error':return {tableList:[],page:{...defaultPage},loading:false}default:return state}
}
const initState={page:{count:0,pageSize:10,}
}
// 父组件
function App(){// 搜索关键词const [queryKey,setQueryKey]=useState<string>('')const [orderState,dispatch]=useReducer(orderReducer,initState)const {page,tableList,loading}=orderState/**模拟查询订单接口*/ const onQueryOrder=(data:any)=>{return new Promise((resolve,reject)=>{// 使用完setimeout后需要清除，以免避免内存浪费const timeObj=setTimeout(() => {resolve({list:mockOrderList,page:{count:mockOrderList.length,pageNum:data.pageNum,pageSize:data.pageSize}})clearTimeout(timeObj)}, 1000);})}const onQuery=()=>{// 首先设置查询状态dispatch({type:'query'})onQueryOrder({queryKey:queryKey,...page}).then((res:any)=>{dispatch({type:'success',tableList:res.list,page:res.page})})}// 重置表单const onReset=()=>{setQueryKey('')onQuery();}useEffect(()=>{onQuery();},[]);return (<div className="App">{/*头部搜索表单  */}<p><input placeholder="请输入搜索关键词" value={queryKey} onChange={(e)=>{setQueryKey(e.target.value)}}></input><button onClick={onQuery}>搜索</button><button onClick={onReset}>重置</button></p>{/* 搜索结果部分 */}<table><thead><tr><th>编号</th><th>商品名称</th><th>订单数量</th><th>用户名称</th></tr></thead><tbody>{tableList&&tableList.map((item:any,index:number)=>{return <tr key={index}><td>{index+1}</td><td>{item.title}</td><td>{item.num}</td><td>{item.userName}</td></tr>})}</tbody></table>{/* 表单分页部分 */}<p>当前分页信息：一共{page.count}；每页：{page.pageSize}；当前第：{page.pageNum}</p><p>当前状态：{loading?'加载中':'加载完成'}</p></div>)}
export default App;