10、React 中的 Refs、状态管理与组件树

React 中的 Refs、状态管理与组件树

1. 无状态函数组件中的 Refs

在无状态函数组件里也能使用 Refs。不过这类组件没有 this ，所以不能用 this.refs 。我们会用函数来设置 Refs，该函数会把输入实例作为参数传递给我们，我们可以捕获这个实例并保存到局部变量中。

下面是将 AddColorForm 重构为无状态函数组件的代码：

const AddColorForm = ({onNewColor=f=>f}) => {
    let _title, _color
    const submit = e => {
        e.preventDefault()
        onNewColor(_title.value, _color.value)
        _title.value = ''
        _color.value = '#000000'
        _title.focus()
    }
    return (
        <form onSubmit={submit}>
            <input ref={input => _title = input}
                   type="text" 
                   placeholder="color title..." required/>
            <input ref