我完全使用 React Hooks 构建了我的第一个聊天应用。感觉很棒。
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
React Hooks 是simple……无论你想到哪些形容词来描述你最喜欢的应用程序状态管理工具（redux、mobx），肯定不会包括它simple。
我曾使用过几种 AppState 工具：几年前，我用 Redux Saga 构建了一个完整的网站。对于一个之前从事后端开发的人来说，学习曲线非常陡峭。一旦你理解了 Saga、Action、Reducers 和 Store 的实现方式，就可以轻松地通过非纯 Action 调用 API 并刷新 UI。之后，我尝试了一段时间 Baobab 的分支功能，发现它在易用性方面有所改进。我的下一个项目相当简单，所以我很幸运地完全避免了任何状态管理。这很有趣，也让我耳目一新frontend wilderness。
几个月前，我决定启动一个副业项目。React Hooks 是一项很酷的新技术，读了他们的介绍文章以及它所承诺的功能后，我立刻就被吸引住了。事实证明，它确实做到了。现在从端点获取数据并将其显示在 UI 上变得如此简单，真是太棒了。
import React, {useState} from 'react';
const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [loginError, setLoginError] = useState('');
let errorLabel;
if (loginError) {
errorLabel = <Help isColor="white">{loginError} </Help>;
}
}
这段代码足以存储表单中的邮箱和密码，将其发送到指定端点，并在出现错误时进行错误处理。它的简洁性令我惊叹，我非常喜欢。
随着我的代码某些部分变得越来越复杂，Hooks 始终坚守岗位，不负众望。useEffect()它为 Hooks 扩展了一个强大的 API，你可以对调用进行条件判断，提供调用逻辑所需的额外变量，最后还可以设置简单状态的值。示例如下：
const [newMessage, setNewMessage] = useState('');
const [post, setPost] = useState(false);
useEffect(() => {
async function postMessage() {
const response = await postNewMessage(
newMessage,
props.match.params.id,
userSession.token,
);
if (response.status === 200) {
setReloadPage(true);
} else if (response.status === 422) {
setErrorJoining('Please write something');
}
}
if (post) {
postMessage();
}
setNewMessage('');
setPost(false);
}, [post, props.match.params.id, userSession.token]);
代码依然清晰易读，而且通过在第二个参数中提供变量，可以确保对变量的任何更改都会再次触发钩子。这样一来，useEffect()我几乎忘记了组件生命周期的存在，而且几乎没有任何妥协。
这个网页应用虽然不复杂，但目前的使用体验非常棒。（你可以在这里测试：https ://beta.nicetalks.co/ ）
我非常感谢 React 团队发布了 Hooks。它们让创建网页应用再次变得如此简单直接。我强烈推荐大家现在就开始使用 Hooks 来开发任何项目。