- 原文：快速了解 react hooks 原理
- 译者：前端小智
到 react 16.8 目前为止，如果编写函数组件，然后遇到需要添加状态的情况，咱们就必须将组件转换为类组件。
编写 class thing extends react.component，将函数体复制到render()方法中，修复缩进，最后添加需要的状态。
今天，可以使用 hook 获得相同的功能，并为自己节省了工作时间。在本文中，主要介绍usestate hook。
usestate 做啥子的
usestate hook 允许咱们向函数组件添加状态，我们通常称这些为“ hooks”，但它们实际上是函数，与 react 16.8 捆绑在一起。 通过在函数组件中调用usestate，就会创建一个单独的状态。
在类组件中，state 总是一个对象，可以在该对象上添加保存属性。
对于 hooks，state 不必是对象，它可以是你想要的任何类型-数组、数字、布尔值、字符串等等。每次调用usestate都会创建一个state块，其中包含一个值。
示例1：使用 usestate 显示/隐藏组件
这个示例是一个组件，它显示一些文本，并在末尾显示一个read more链接，当单击链接时，它展开剩下的文本。
import react, { usestate } from 'react';
import reactdom from 'react-dom';
// 两个 props:
// text - 显示的内容
// maxlength - 在点击“read more”之前显示多少个字符
function lesstext({ text, maxlength }) {
// 创建一个状态，并将其初始化为“true”
const [hidden, sethidden] = usestate(true);
if (text <= maxlength) {
return <span>{text}</span>;
}
return (
<span>
{hidden ? `${text.substr(0, maxlength).trim()} ...` : text}
{hidden ? (
<a onclick={() => sethidden(false)}> read more</a>
) : (
<a onclick={() => sethidden(true)}> read less</a>
)}
</span>
);
}
reactdom.render(
<lesstext
text={`专注、努力是成功的真正关键。把你的眼睛盯在目标上，然后朝着目标迈出下一步`}
maxlength={35}
/>,
document.queryselector('#root')
);
仅用一行代码，我们就使这个函数组件有状态：
const [hidden, sethidden] = usestate(true);
但是这个函数到底在做什么呢?如果每次渲染都调用它(确实如此)，它又是如何保留状态的。
hooks 实现的技巧
这里的“神奇”之处是，react在每个组件的幕后维护一个对象，并且在这个持久对象中，有一个“状态单元”数组。当你调用usestate时，react将该状态存储在下一个可用的单元格中，并递增数组索引。
假设你的 hooks 总是以相同的顺序调用(如果遵循 hooks 的规则，它们将是相同的顺序)，react能够查找特定usestate调用的前一个值。对usestate的第一个调用存储在第一个数组元素中，第二个调用存储在第二个元素中，依此类推。
这也不是很神奇的事情，主要它依赖于你可能没有想过的事实：咱们写的的组件是由react调用 ，所以它可以在调用组件之前事先做好一些工作。 而且，渲染组件的行为不仅仅是函数调用。 像<thing />这样的jsx被编译为react.createelement（thing） - 显然 react 可以控制它的调用方式和时间。
示例2：根据之前的状态更新状态
看看另一个例子：根据前一个值更新state的值。
咱们要造个计步器，每点击一次按钮，就计一次，点击完后，它会告诉你你走了多少步。
import react, { usestate } from 'react';
function steptracker() {
const [steps, setsteps] = usestate(0);
function increment() {
setsteps(steps => steps + 1);
}
return (
<div>
总共走了 {steps} 步!
<br />
<button onclick={increment}>
点点我，步数不是个事！
</button>
</div>
);
}
reactdom.render(
<steptracker />,
document.queryselector('#root')
);
首先，通过调用usestate创建一个新的state，并将其初始化为0。它返回steps的当前值0和setsteps函数来更新 steps，用 increment函数来对steps进行增 1 操作。
这里还可以优化的提取increment函数，可以直接将 increment 函数里面的内联到 onclick 里面：
<button onclick={() => setsteps(steps => steps + 1)}>
i took another step
</button>
示例3: state 作为数组
记住，state可以保存任何你想要的值。下面是一个随机数列表的例子，单击按钮将向列表添加一个新的随机数：
function randomlist() {
const [items, setitems] = usestate([]);
const additem = () => {
setitems([
...items,
{
id: items.length,
value: math.random() * 100
}
]);
};
return (
<>
<button onclick={additem}>add a number</button>
<ul>
{items.map(item => (
<li key={item.id}>{item.value}</li>
))}
</ul>
</>
);
}
注意，我们state初始化为空数组[]，并在additem函数中更新值。
setitems 更新 state 不会将旧值“合并” - 它会使用新值覆盖state。 这与this.setstate在类中的工作方式不同。
示例4：具有多个键的 state
再来看看，state为对象的例子，创建一个包含2个字段的登录表单：username 和password。
下面示例主要展示如何在一个state对象中存储多个值，以及如何更新单个值。
function loginform() {
const [form, setvalues] = usestate({
username: '',
password: ''
});
const printvalues = e => {
e.preventdefault();
console.log(form.username, form.password);
};
const updatefield = e => {
setvalues({
...form,
[e.target.name]: e.target.value
});
};
return (
<form onsubmit={printvalues}>
<label>
username:
<input
value={form.username}
name="username"
onchange={updatefield}
/>
</label>
<br />
<label>
password:
<input
value={form.password}
name="password"
type="password"
onchange={updatefield}
/>
</label>
<br />
<button>submit</button>
</form>
);
}
如果想试试，可查看 codesandbox。
首先，我们创建一个state片段，并用一个对象初始化它
const [form, setvalues] = usestate({
username: '',
password: ''
})
这看起来像是在类中初始化状态的方式。
还有一个处理提交的函数，其中，e.preventdefault来阻止页面刷新并打印出表单值。
updatefield函数更有意思。它使用setvalues传递一个对象，为了确保现有的状态不被覆盖，这里使用了展开运算(...form)。
代码部署后可能存在的bug没法实时知道，事后为了解决这些bug，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的bug监控工具 fundebug。
原文：
关于fundebug
fundebug专注于javascript、微信小程序、微信小游戏、支付宝小程序、react native、node.js和java线上应用实时bug监控。 自从2016年双十一正式上线，fundebug累计处理了20亿+错误事件，付费客户有阳光保险、核桃编程、荔枝fm、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家！
