如果你很熟悉 vue 与 react ，兴许你也觉得 vue3.0 抄袭了react，这项react 在不久前发布的新技术，在 vue3.0 中被重新搬上了舞台。也使它重新活跃在了人们的视野中，我技术不深，与大家分享我的见解和猜测。
useState使用状态
const [n, setN] = React.useState(0)
const [user, setUser] = React.useState({name: 'Jack', age: 18})
- 1
- 2
注意事项：
无局部更新能力
如果state是一个对象，能否部分setState？
答案是不行，因为setState不会帮我们合并属性
那么useReducer会合并属性吗？也不会！
因为React认为这应该是你自己要做的事情
function App(){
const [user, setUser] = React.useState({name: 'Jack', age: 18})
const onClick = () =>{
//setUser不可以局部更新，如果只改变其中一个，那么整个数据都会被覆盖
// setUser({
// name: 'Frank'
// })
setUser({
...user, //拷贝之前的所有属性
name: 'Frank' //这里的name覆盖之前的name
})
}
return (
<div className='App'>
<h1>{user.name}</h1>
<h2>{user.age}</h2>
<button onClick={onClick}>Click</button>
</div>
)
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
注意事项：
地址要进行改变
setState(obj) 如果obj地址不变，那么React就认为数据没有变化，不会更新视图
useState接受函数
const [state, setState] = useState(() => {return initialState})
该函数返回初始state，且只执行一次
- 1
- 2
- 3
setState接受函数
setN(i => i + 1)
如果你能接受这种形式，应该优先使用这种形式
- 1
- 2
- 3
useReducer
用来践行Flux/Redux思想
一、创建初始值initialState
二、创建所有操作reducer(state, action);
三、传给userReducer，得到读和写API
四、调用写({type: '操作类型'})
总的来说，useReducer 是 useState 的复杂版
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
如何代替 Redux
一、将数据集中在一个 store 对象
二、将所有操作集中在 reducer
三、创建一个 Context
四、创建对数据的读取 API
五、将第四步的内容放到第三步的 Context
六、用 Context.Provider 将 Context 提供给所有组件
七、各个组件用 useContext 获取读写API
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
import React, { useReducer, useContext, useEffect } from "react";
import ReactDOM from "react-dom";
const store = {
user: null,
books: null,
movies: null
};
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();
}
}
const Context = React.createContext(null);
function App() {
const [state, dispatch] = useReducer(reducer, store);
const api = { state, dispatch };
return (
<Context.Provider value={api}>
<User />
<hr />
<Books />
<Movies />
</Context.Provider>
);
}
function User() {
const { state, dispatch } = useContext(Context);
useEffect(() => {
ajax("/user").then(user => {
dispatch({ type: "setUser", user: user });
});
}, []);
return (
<div>
<h1>个人信息</h1>
<div>name: {state.user ? state.user.name : ""}</div>
</div>
);
}
function Books() {
const { state, dispatch } = useContext(Context);
useEffect(() => {
ajax("/books").then(books => {
dispatch