周五看见 React v16.7.0-alpha Hooks, 今早起来看见圈里已经刷屏了 Hooks, 正好周末, 正好 IG 和 G2 的比赛还没开始, 研究下...
刚刚接触 react 时候非常喜欢用函数式组件, 因为太简洁了写起来非常快, 然后然后.. 写到后面发现很多自己以前写的组件需要改.. 为什么呢, 因为自己当时写的时候考虑的不周到, 后期发现很多地方都需要生命周期和状态来进行渲染优化, 然后就是大量修改函数式为 classComponent. 所以现在起手一般都是 classComponent, 只有极简单的组件用函数式比如列表 item 啥的.
现在有了 Hooks,"Hooks" 本意是 "钩子" 的意思. 在 React 里, hooks 就是一系列特殊的函数, 使函数组件 (functional component) 内部能够 "钩住" React 内部的 state 和 life-cycles.
Rules of Hooks
只能在顶层调用 Hooks . 不要在循环, 条件或嵌套函数中调用 Hook
只能在 functional component 中使用
State Hook
即在函数式中使用 state
- import { useState } from 'react';
- function Example() {
- const [count, setCount] = useState(0);
- //const [age, setAge] = useState(42);
- //const [fruit, setFruit] = useState('banana');
- //const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
- return (
- <div>
- <p>You clicked {count} times</p>
- <button onClick={() => setCount(count + 1)}>
- Click me
- </button>
- </div>
- );
- }
useState 的参数就是以前 state 的初始值.
useState 返回的值中第一个参数是以前的 state, 第二个参数是 setState, 不过以前我们只有一个 state, 现在可以自由命名, 更直观了, 比如上面的 age 和 setAge,fruit 和 setFruit
Effect Hook
effect Hook 使我们可以使用生命周期了
- function FriendStatusWithCounter(props) {
- const [count, setCount] = useState(0);
- useEffect(() => {
- document.title = `You clicked ${count} times`;
- });
- const [isOnline, setIsOnline] = useState(null);
- useEffect(() => {
- ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
- return () => {
- ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
- };
- });
- function handleStatusChange(status) {
- setIsOnline(status.isOnline);
- }
- // ...
每当 React 更新之后, 就会触发 useEffect(在第一次 render 和每次 update 后触发).
Custom Hooks
有时, 我们希望在组件之间重用一些有状态逻辑.
首先, 我们将这个逻辑写到 useFriendStatus: 返回朋友在线的状态 isOnline
- import { useState, useEffect } from 'react';
- function useFriendStatus(friendID) {
- const [isOnline, setIsOnline] = useState(null);
- function handleStatusChange(status) {
- setIsOnline(status.isOnline);
- }
- useEffect(() => {
- ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
- return () => {
- ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
- };
- });
- return isOnline;
- }
然后我们在其他组件中使用
- function FriendListItem(props) {
- const isOnline = useFriendStatus(props.friend.id);
- return (
- <li style={{ color: isOnline ? 'green' : 'black' }}>
- {props.friend.name}
- </li>
- );
- }
- Other Hooks
你可能会发现一些不太常用的内置 Hook 很有用.
- useContext:
- function Example() {
- const locale = useContext(LocaleContext);
- const theme = useContext(ThemeContext);
- // ...
- }
- useReducer
- function Todos() {
- const [todos, dispatch] = useReducer(todosReducer);
- // ...
总结
以后可以更愉快的写 functional component 了
参考
react 官方 Hooks 简介 https://reactjs.org/docs/hooks-intro.html
Hooks 例子 https://reactjs.org/docs/hooks-overview.html
预言
等下比赛 IG 应该可以 3:2 拿下, 为啥是 3, 因为想多看几场呀
最后
大家好, 这里是「 TaoLand 」, 这个博客主要用于记录一个菜鸟程序猿的 Growth 之路. 这也是自己第一次做博客, 希望和大家多多交流, 一起成长! 文章将会在下列地址同步更新......
来源: https://www.cnblogs.com/TaoLand/p/9861398.html