1.useReducer
redux有一个单一的store,
首先使用一个例子感受一下
import React, { useReducer } from 'react';
const reducer = (state, action) => {
switch(action.type) {
case 'ADD': return state + 1;
case 'SUB': return state - 1;
default: return state;
}
}
const Child = () => {
const [count, dispatch] = useReducer(reducer, 10);
return (
<div>
child:{count}
<button onClick={() => dispatch({type: 'ADD'})}>+1</button>
<button onClick={() => dispatch({type: 'SUB'})}>-1</button>
</div>
)
};
const Parent = () => {
return (
<div>
parent
<Child />
</div>
)
};
function App() {
return (
<div className="App">
<Parent />
</div>
);
}
export default App;
useReducer和useState的区别
1.useState的实现是基于useReducer的
2.可以进行全局管理
看下面简单的实现
function useState = (initState) => {
const [state, dispatch] = useReducer((state, action) => (state || initState), initState);
return [state, dispatch];
}
2.useContext
先看怎么用吧
import React, { useReducer, useContext } from 'react';
const Ctx = React.createContext(null);
// useContext
const reducer = (state, action) => {
switch(action.type) {
case 'ADD': return state + 1;
case 'SUB': return state - 1;
default: return state;
}
}
const Child = () => {
const [count, dispatch] = useContext(Ctx);
return (
<div>
child:{count}
<button onClick={() => dispatch({type: 'ADD'})}>+1</button>
<button onClick={() => dispatch({type: 'SUB'})}>-1</button>
</div>
)
};
const Parent = () => {
const [count] = useContext(Ctx);
return (
<div>
parent: {count}
<Child />
</div>
)
};
function App() {
const [count, dispatch] = useReducer(reducer, 20);
return (
<Ctx.Provider value={[count, dispatch]}>
<div className="App">
<Parent />
</div>
</Ctx.Provider>
);
}
export default App;
再来说说其他的: useReducer和useContext的出现并不是要取代redux, redux是一个独立的第三方库,和其他的js可以很好的结合,jq也可以的。而且他也不能替代redux,在功能上
redux有一个优秀的中间件的机制,可以让你实现异步的数据流等等。debugger能力等。所以状态很复杂的话还是使用redux吧。