react-hooks简单同步异步处理小技巧
<div><div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">import React, { useState, useEffect, useReducer } from 'react';
import { useImmer } from "use-immer"
import './App.css';
function reducer(state: { count: number; }, action: { type: any; }) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function App() {
// 定义
const = useImmer({
people: [
{
name: '马云',
englishName: 'Jack Ma'
},
{
name: '马化腾',
englishName: 'Pony Ma'
},
{
name: '李彦宏',
englishName: 'Robin Li'
}
]
})
const = useState(1);
const = useReducer(reducer, {count:999});
useEffect(() => {
console.log(num);
//处理异步数据
}, )
useEffect(() => {
console.log(state);
}, ])
const onClick = () => {
setNum((num) => {
console.log(num,"点击之前的变化");
//处理异步数据
return num = 2
})
}
const onClick1 = () => {
setState((state: { people: { name: string; }[]; }) => { state.people.name = '陈强' })
console.log(state);//异步
}
const onClick2 = () => {
dispatchReducer({ type:"increment"})
console.log(stateReducer.count);//异步
}
return (
<div className="App">
<h1>我是useReducer----{stateReducer.count}</h1>
<h1>{num}</h1>
<ul>
{state.people.map(item => <li key={item.englishName}>{item.name}</li>)}
</ul>
<button onClick={onClick}>点击</button>
<button onClick={onClick1}>复杂数据处理</button>
<button onClick={onClick2}>我要修改stateReducer</button>
</div>
);
}
export default App;
</pre>
</div>
<p> </p>
</div>
</div>
<div id="MySignature" role="contentinfo">
一条不甘于平凡的咸鱼分享<br><br>
来源：https://www.cnblogs.com/cq1715584439/p/12674689.html
頁:
[1]