class ProfilePage extends React.Component { render() { const props = this.props; const showMessage = () => { alert('Followed ' + props.user); }; const handleClick = () => { setTimeout(showMessage, 3000); }; return <button onClick={handleClick}>Follow</button>; } }
你在渲染的时候就已经"捕获"了props：。这样，在它内部的任何代码（包括 showMessage）都保证可以得到这一次特定渲染所使用的props。
Hooks 的由来
但是：如果你在 render方法中定义各种函数，而不是使用class的方法，那么使用类的意义在哪里？
事实上，我们可以通过删除类的"包裹"来简化代码：
function ProfilePage(props) { const showMessage = () => { alert('Followed ' + props.user); }; const handleClick = () => { setTimeout(showMessage, 3000); }; return ( <button onClick={handleClick}>Follow</button> ); }
就像上面这样， props仍旧被捕获了 —— React将它们作为参数传递。 不同于 this ， props 对象本身永远不会被React改变。
当父组件使用不同的props来渲染 ProfilePage时，React会再次调用 ProfilePage函数。但是我们点击的事件处理函数，"属于"具有自己的 user值的上一次渲染，并且 showMessage回调函数也能读取到这个值。它们都保持完好无损。
这就是为什么，在上面那个的函数式版本中，点击关注账号1，然后改变选择为账号2，仍旧会弹出 'Followed 账号1'：
函数式组件捕获了渲染所使用的值。
使用Hooks，同样的原则也适用于state。 看这个例子：
function MessageThread() { const [message, setMessage] = useState(''); const showMessage = () => { alert('You said: ' + message); }; const handleSendClick = () => { setTimeout(showMessage, 3000); }; const handleMessageChange = (e) => { setMessage(e.target.value); }; return <> <input value={message} onChange={handleMessageChange} /> <button onClick={handleSendClick}>Send</button> </>; }
如果我发送一条特定的消息，组件不应该对实际发送的是哪条消息感到困惑。这个函数组件的 message变量捕获了"属于"返回了被浏览器调用的单击处理函数的那一次渲染。所以当我点击"发送"时 message被设置为那一刻在input中输入的内容。
读取最新的状态
因此我们知道，在默认情况下React中的函数会捕获props和state。 但是如果我们想要读取并不属于这一次特定渲染的，最新的props和state呢？如果我们想要["从未来读取他们"]呢？
在类中，你通过读取 this.props或者 this.state来实现，因为 this本身时可变的。React改变了它。在函数式组件中，你也可以拥有一个在所有的组件渲染帧中共享的可变变量。它被成为"ref"：
function MyComponent() { const ref = useRef(null); }
但是，你必须自己管理它。
一个ref与一个实例字段扮演同样的角色。这是进入可变的命令式的世界的后门。你可能熟悉'DOM refs'，但是ref在概念上更为广泛通用。它只是一个你可以放东西进去的盒子。
甚至在视觉上， this.something就像是 something.current的一个镜像。他们代表了同样的概念。
默认情况下，React不会在函数式组件中为最新的props和state创造refs。在很多情况下，你并不需要它们，并且分配它们将是一种浪费。但是，如果你愿意，你可以这样手动地来追踪这些值：
function MessageThread() { const [message, setMessage] = useState(''); const latestMessage = useRef(''); const showMessage = () => { alert('You said: ' + latestMessage.current); }; const handleSendClick = () => { setTimeout(showMessage, 3000); }; const handleMessageChange = (e) => { setMessage(e.target.value); latestMessage.current = e.target.value; };
如果我们在 showMessage中读取 message，我们将得到在我们按下发送按钮那一刻的信息。但是当我们读取 latestMessage.current，我们将得到最新的值 —— 即使我们在按下发送按钮后继续输入。
ref是一种"选择退出"渲染一致性的方法，在某些情况下会十分方便。
通常情况下，你应该避免在渲染期间读取或者设置refs，因为它们是可变得。我们希望保持渲染的可预测性。 然而，如果我们想要特定props或者state的最新值，那么手动更新ref会有些烦人。我们可以通过使用一个effect来自动化实现它：