react+react hook学习之路
笔记之家
我们为什么要学习react hook
react的组件类型分为两种:状态组件,无状态组件.
状态组件:class (类组件)。 无状态组件:function (函数组件)
eg:
状态组件 类组件
class App exteds React.components{
render(){
return(<div>类组件</div>)
}
}
非状态组件。函数组件
function App(){
return (
<div>无状态组件</div>
)
}
类组件还存在其他生命周期函数,而函数组件没有.
reacthook的出现,目的是为了能让函数组件也拥有同类组件的生命周期一样的功能.
简单学习一下react hook的api
- useState
- useReducer
- useContext
- useEffect
- useMemo
- useCallback
useState
使用方法:
const [data,setData]=useState(1)
const [obj,setObj] =useState({name:''txx',age:12})
<div>{data}</div>
<div>{obj.name}</div>
<div>{obj.age}</div>
当用setObj修改对象的时候,setObj({name:“xxx”}),这个时候age会被删除 ,意思是setState不会合并我们的额属性.且这个时候数据的指向地址也发生了改变.
useReducer
以下例子借鉴。https://zhuanlan.zhihu.com/p/337290491
用来践行flux/redux的思想
使用方法:四步走 这次我们同样实现加一,乘以二操作
创建初始值
const initial={
n:0
}
2.创建所有操作reducer
const reducer=(state,action)=>{
if(action.type==='add'){
return {n:state.n+action.number}
}else if(action.type==='mul'){
return {n:state.n*2}
}else {
throw new Error('unknown type')
}
}
3.传给useReducer hook
const [state,dispatch]=useReducer(reducer,initial)
const {n}=state
4.调用写({type:‘操作类型’})
const onClick=()=>{
dispatch({type:'add',number:1})
}
const onClick2=()=>{
dispatch({type:'add',number:2})
}
useReducer可以说是useState的复杂版
什么时候用state,什么时候用reducer?
如果有几个变量应该放在一起,就可以使用useReducer 然后对这个对象进行整体的操作
如何用reducer代替redux呢
一,将数据集中在一个store对象
const store = {
user: null,
books: null,
movies: null
};
二,将所有操作集中在reducer里面
function reducer(state, action) {
switch (action.type) {
case "setUser":
return { ...state, user: action.user };
case "setBooks":
return { ...state, books: action.books };
case "setMovies":
return { ...state, movies: action.movies };
default:
throw new Error();
}
}
三,创建一个context
const Context = React.createContext(null);
四,创建读写的api
这些组件User等必须放在provider里面,因为要实现数据共享
const [state, dispatch] = useReducer(reducer, store);
const api = { state, dispatch };
return (
<Context.Provider value={api}>
<User />
<hr />
<Books />
<Movies />
</Context.Provider>
);
五,在各个组件就可以使用读写api了
function User() {
通过useContext拿到了state和dispatch
const { state, dispatch } = useContext(Context);
这里用useEffect模拟了DidMount生命周期,这样不会每次变化都请求数据
useEffect(() => {
ajax("/user").then(user => {
dispatch({ type: "setUser", user: user });
});
}, []);
return (
<div>
<h1>个人信息</h1>
<div>name: {state.user ? state.user.name : ""}</div>
</div>
);
}
useContext
使用方法
const Context=React.creatContext(null)
用Context.Provider来圈定作用域. 再把所需要的数据传入
<Context.Provider value={data}>
<User/>
</Context.Provider>
User组件
const count=useContext(context);