之前文章中论述了运用useDeferredValue进行烘托时的优化，本篇文章即将解说的useOptimisitic是从别的个维度相同做到了用户体会的优化~
首先需求告知下，useOptimisitic现在仍是在实验中的特性，直接在项目中去运用它是有风险的。可是不妨碍咱们学习它，由于它优化的视点可以让咱们有新的视角去考虑项目中是否存在进一步优化的当地。
本篇文章会论述以下几点：
- useOptimisitic的运用
- useOptimisitic怎么进行烘托优化
- 假如不运用useOptimisitic,咱们怎么优化
一、运用useOptimisitic
首先咱们需求给这个钩子下个定义，引证文档的话~
useOptimisticis a React Hook that lets you optimistically update the UI.
经过这样的钩子咱们可以达观的更新视图。。。直译过来简直无法了解，😅
咱们直接看代码怎么书写：
const [optimisticState, addOptimistic] = useOptimistic(
someState,
// updateFn
(currentSomeState, optimisticValue) => {
// merge and return new state
// with optimistic value
}
);
简略来说，钩子调用后会吐出一个optimisticState和addOptimistic，optimisticState可以了解为是一个someStated的中心态，试想下为什么咱们需求得到一个中心态呢？
由于someState的更新有可能是推迟的，譬如恳求接口后才完成状况的翻转，在状况更新前咱们可以立马得到一个中心态的值，那么这个中心态等于什么呢？
取得的中心态值是开发者自定义出来的，也便是上面示例中的updateFn回调函数，开发者可以经过回调函数中的参数someState以及当前的中心态值去从头生成一个新的中心态值。
二、useOptimisitic进行烘托优化
经过上面的简略介绍，想必咱们仍是无法了解具体运用的场景，下面结合官网的事例向咱们论述。
假设咱们现在有个发送音讯的界面，用户输入input框中的内容，每次submit会将音讯提交到后端，再将音讯成果展现到页面上。恳求到后端的时刻被人为的变慢了，像这样的场景。咱们就可以考虑优化~
优化的计划便是：咱们将用户输入的音讯先直接展现到页面中，等后端的恳求完成的时分再进行批改。
从这点了解起来确实是达观的更新视图，预判了正确恳求呼应的成果。描绘完了计划，咱们可以看看中心代码的书写。
这儿需求注意，官网的事例中在更新状况有些bug,现在给React提了issue，咱们可以参阅我批改的版别：官网demo批改版
function Thread({ messages, sendMessage }) {
const formRef = useRef();
// 提交恳求
async function formAction(formData) {
// 恳求前获取中心态值 这样的值是带着sending标识 代表发送中
addOptimisticMessage(formData.get("message"));
formRef.current.reset();
// 建议恳求
await sendMessage(formData);
}
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
messages,
(state, newMessage) => [
...state,
{
text: newMessage,
sending: true
}
]
);
return (
<>
{optimisticMessages.map((message, index) => (
<div key={index}>
{message.text}
{!!message.sending && <small> (Sending...)</small>}
</div>
))}
<form action={formAction} ref={formRef}>
<input type="text" name="message" placeholder="Hello!" />
<button type="submit">Send</button>
</form>
</>
);
}
中心的当地就在于useOptimistic的运用~
这儿在提交表单发送恳求前，会经过调用addOptimisticMessage去批改中心态的值，这样咱们页面中心态值optimisticMessages就会立马得到更新，更新的内容便是带着输入的信息和sending:true的标识，如下回调函数：
(state, newMessage) => [
...state,
{
text: newMessage,
sending: true
}
]
这样一来，用户就无须等待服务端呼应就可以看到音讯内容。
看到这儿咱们似乎有个疑问，这就像是自己假造了下恳求呼应的内容用于展现而已，为什么非要用useOptimistic呢？
要害便是就在于当恳求真的呼应回来的时分，optimisticMessage会自动更新为最新的state值
咱们可以在我贴出来的codeSand中演示就能发现，optimisticMessage被批改的进程。这儿其实有个体会问题，假如咱们输入的比较快的时分会发现同一条音讯在界面中会出现两次，一个是带着sending、一个是没有sending。按道理应该是直接替换掉的，体会会比较好。
三、不运用useOptimistic进行烘托优化
看了以上的解说，相信咱们已经对这个实验中的hook一定的认识了，那么咱们要立马运用它吗？最好是不要，仍是等它安稳之后再运用吧🐶~
不过它提供了一个视角让咱们面临这样的场景优化
经过中心态的值即时的去呼应用户的界面，后续再进行批改。
所以，当咱们不去运用这样的钩子，咱们该怎么完成呢？
全体的逻辑仍是上述的思路，只不过咱们需求自己保护和同步两套状况值，一套是后端呼应的值，另一套是用户即时输入的值，并且当后端呼应后，咱们要去手动同步或批改它们。完整的事例：不运用useOptimistic版别
中心代码：
function Thread({ messages, sendMessage }) {
const formRef = useRef();
const [tempMessages, setTempMessages] = useState(messages);
useEffect(() => {
// 在副作用里 根据id去批改对应的messages的pending状况
const mergeTempMessages = tempMessages.map((info) => {
if (messages.find((item) => item.id === info.id)) {
return {
...info,
isPending: false
};
}
return info;
});
setTempMessages(mergeTempMessages);
}, [messages]);
async function formAction(formData) {
let newId = id++;
setTempMessages((tempMessages) => {
return [
...tempMessages,
{ id: newId, text: formData.get("message"), isPending: true }
];
});
formRef.current.reset();
sendMessage(formData, newId);
}
return (
<>
{tempMessages.map((message, index) => {
return (
<div key={index}>
{message.text}
{!!message.isPending && <small> (Sending...)</small>}
</div>
);
})}
<form action={formAction} ref={formRef}>
<input type="text" name="message" placeholder="Hello!" />
<button type="submit">Send</button>
</form>
</>
);
}
中心就在于咱们运用了useEffect去同步和批改tempMessages的值，让它和恳求呼应回来的值进行同步。另一个要害点便是怎么找到对应的messages值进行同步，所以需求保护自增id，用于标识对应的音讯体。
这样一来相同可以完成烘托的优化，只不过少许有点费事，没有直接运用钩子便利。可是，咱们可以在codeSand中演示就会发现这样的计划页面中同一条音讯就不会出现两次了。
四、总结
useOptimisitic本质上解决的是数据呼应的问题，它答应开发者自定义中心态的值，快速去呼应用户的交互，等接口呼应之后再同步中心态值。
所以开发者要去甄别运用的场景，假如你能达观的预判数据的值，那么就可以选用此计划。
由于是实验中的能力，所以不建议咱们直接运用，可是它解决问题的视觉值得咱们去采用，咱们可以不运用新特性去达到一样的作用。
假如咱们有想了解的Hook解析或者疑问，欢迎留言讨论或私信。假如咱们对源码感兴趣，可以移步到别的一个专栏：渐进式解剖React
