自定义 Hook（State Hook）_web前端培训

自定义 Hook

1 State Hook

开头的计数器例子就是一种 State Hook 的应用：

这种最常用的 Hook 也展示了 Hooks 的通用逻辑：

调用 useState  方法，返回一个数组

这里使用了 “array destructuring”  语法

数组首个值相当于定义了 this.state.count，命名随意

数组第二个值用来更新以上值，命名随意，相当于 this.setState({count:‘’})

useState  方法唯一的参数，就是所定义值的初始值

多次调用 Hook

当需要用到多个状态值时，不同于在 state 中都定义到一个对象中的做法，可以多次使用 useState() 方法：

const [age, setAge] = useState(42);const [fruit, setFruit] = useState(‘banana’);const [todos, setTodos] = useState([{ text: ‘Learn Hooks’ }]);

应该注意到，同样有别于传统 state 的是，调用相应更新函数后，只会用新值替换旧值，而非合并两者。

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习。