2021-10-27

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);