React Hooks的常见应用及一些原理
类组件（class）
类组件的缺点：
- 大型组件很难拆分和重构，也很难测试
- 业务逻辑分散在组件的各个方法中，导致重复逻辑或关联逻辑
- 组件类引入复杂的编程模式，比如render、props
import React, { Component } from "react";
export default class Button extends Component {
constructor() {
super();
this.state = { buttonText: "Click me, please" };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(() => {
return { buttonText: "Thanks, been clicked!" };
});
}
render() {
const { buttonText } = this.state;
return <button onClick={this.handleClick}>{buttonText}</button>;
}
}
函数组件
目的：React团队希望，组件不要变成复杂的容器，最好只是数据流的管道，开发者可以根据需要组合管道。完全不使用类就能写出一个全功能组件
React很早就支持函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
这种写法有重大限制，必须是纯函数，不能包含状态，也不支持生命周期方法，因此无法取代类。
Hooks
React核心思想是将页面拆成一堆独立的、可复用的组件，并且用自上而下的数据流串联起来。但是在实际项目中很多组件冗长且难以复用。
React Hooks要解决的问题是状态逻辑复用。
React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。
React默认提供了一些常用函数，同时也允许封装自己的钩子，React约定，所有钩子函数一律用use前缀命名，意思是为函数引入外部功能。
4种常见函数：
- useState()
- useContext()
- useReducer()
- useEffect()
useState(状态钩子)
纯函数不能有状态，useState用于为函数组件引入状态。
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useState接收状态初始值，返回一个数组，第一个是状态的当前值，第二个是函数，用来更新状态 (约定命名为set+状态变量名)。
count是怎么做到更新的呢？
在上例中count只是一个数字，就像下面这行代码一样
const count = 42;
// ...
<p>You clicked {count} times</p>
组件第一渲染时，从useState拿到初始值0，调用setCount,组件重新渲染，拿到1。
//初始值
function Counter() {
const count = 0;
// ...
<p>You clicked {count} times</p>
// ...
}
// 点击一次
function Counter() {
const count = 1;
// ...
<p>You clicked {count} times</p>
// ...
}
// 点击两次
function Counter() {
const count = 2;
// ...
<p>You clicked {count} times</p>
// ...
}
更新状态，React会重新渲染组件，每一次都拿到独立的count状态，但是这个状态在一次渲染过程中是常量
function Counter() {
const [count, setCount] = useState(0);
function handleAlertClick() {
setTimeout(() => {
alert('You clicked on: ' + count);
}, 3000);
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
<button onClick={handleAlertClick}>
Show alert
</button>
</div>
);
}
注意：react根据顺序来保存和使用state
//第一次渲染
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
//第二次渲染
useState(42); //读取状态变量age的值（这时候传的参数42直接被忽略）
useState('banana'); //读取状态变量fruit的值（这时候传的参数banana直接被忽略）
useState([{ text: 'Learn Hooks' }]); //...
若将代码改为
let showFruit = true;
const [age, setAge] = useState(42);
if(showFruit) {
const [fruit, setFruit] = useState('banana');
showFruit = false;
}
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
//第二次渲染
useState(42); //读取状态变量age的值（这时候传的参数42直接被忽略）
// useState('banana');
useState([{ text: 'Learn Hooks' }]); //读取到的却是状态变量fruit的值，导致报错
useContext(共享状态钩子)
有两个组件，我们希望共享他们的状态
<div className="App">
<Navbar/>
<Messages/>
</div>
首先用到React Context，在组件外部建立一个Context（?）。
const AppContext = React.createContext({});
之后用AppContext将组件封装
<AppContext.Provider value={{
username: 'superawesome'
}}>
<div className="App">
<Navbar/>
<Messages/>
</div>
</AppContext.Provider>
AppContext.Provider提供了一个Context对象，该对象可以被子组件共享
export default function Header() {
const { username } = useContext(AppContext)
return (
<div>
<p>my name is {username}</p>
</div>
);
}
export default function Content() {
const { username } = useContext(AppContext)
return (
<div>
<p>Hello, {username}</p>
</div>
);
}
因此，react规定我们必须把hooks写在函数的最外层，不能写在ifelse等条件语句当中，来确保hooks的执行顺序一致。
useReducer(action钩子)
React本身不提供状态管理功能，通常需要使用外部库，最常用的是Redux
Redux核心概念：组件发出 action 与状态管理器通信。状态管理器收到 action 以后，使用 Reducer 函数算出新的状态。
Reducer 函数的形式是：
(state, action) => newState
useReducer用来引入Reducer
const [state, dispatch] = useReducer(reducer, initialState);
下面是一个计数器
Reducer
const myReducer = (state, action) => {
switch(action.type) {
case('countUp'):
return {
...state,
count: state.count + 1
}
default:
return state;
}
}
组件
export default () => {
const [state, dispatch] = useReducer(myReducer, { count: 0 });
return (
<div>
<button onClick={() => dispatch({ type: "countUp" })}>+1</button>
<p>Count: {state.count}</p>
</div>
);
};
useEffect(副作用钩子)
可将useEffect视为componentDidMount，componentDidUpdate 和 componentWillUnmount 的组合。
useEffect(() => {
setLoading(true);
fetch(`https://cnodejs.org/api/v1/topics?page=${pageId}`)
.then(response => response.json())
.then(data => {
setTitle(data.data[0].title);
setLoading(false);
});
}, [pageId]);
useEffect接收两个参数。第一个是函数，放所需执行的代码，放在componentDidMount里面的代码，可以直接放在useEffect中，第二个参数是一个数组，里面是Effect的依赖项，数组发生变化，useEffect就会执行。第二个参数可以省略，每次渲染就会执行useEffect。
effect是如何读取到最新的count值，并且执行的？
我们已经知道count是某个特定渲染中的常量。事件处理函数“看到”的是属于它那次特定渲染中的count状态值。对于effects也同样如此，并不是count的值在“不变”的effect中发生了改变，而是effect 函数本身在每一次渲染中都不相同。
// 第一次渲染
useEffect(() => {
fetch(`https://cnodejs.org/api/v1/topics?page=${1}`)
});
//第二次渲染
useEffect(() => {
fetch(`https://cnodejs.org/api/v1/topics?page=${2}`)
});
//...
React会记住你提供的effect函数，在每次DOM更改后调用它，并且，effect函数“看到”，都是它那次的特定的值
关于依赖
effect中用到的所有组件内的值都要包含在依赖中，如果设置了错误的依赖项，会怎么样呢？
比如,将一个类组件的定时器改写成useEffect
class Counter extends React.Component {
state = {
count: 0,
};
componentDidMount() {
this.interval = setInterval(this.tick, 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
tick = () => {
this.setState({
count: this.state.count + 1
});
}
render() {
return <h1>{this.state.count}</h1>;
}
}
我们可能会想，我只想运行一次effect，开启一次定时器，清除一次
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(id);
}, []);
return <h1>{count}</h1>;
}
它只递增了一次，为什么呢？是因为定时器函数被清除了吗？
React只会在浏览器绘制后运行effect。这使得你的应用更流畅，因为大部分effects不会阻塞屏幕更新，Effect的清除同样被延迟了。上一次的effect会在重新渲染后被清除掉
因为依赖是我们告诉effect需要重新执行的依据，第一次渲染中
setCount(count + 1);
等价于
setCount(0 + 1);
而我们的依赖为[],effect不会重新执行，所以之后每一次其实都在调用
setCount(0 + 1);
两种解决办法
-
在依赖中包含所有effect中用到的组件内的值
useEffect(() => { const id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]);缺点：
- 依赖项过多
- 定时器会在每一次count改变后被清除
-
修改effect内部确保包含的值只在需要时发生变更（减少依赖）
useEffect(() => { const id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); => useEffect(() => { const id = setInterval(() => { setCount(c => c + 1); }, 1000); return () => clearInterval(id); }, [count]);React知道当前状态值，我们只需要告诉react去递增，不需要告诉他具体的值
自定义
我们还可以将hooks代码封装起来，变成自定义的hooks，方便共享
const useTitle = (pageId) => {
const [loading, setLoading] = useState(true);
const [title, setTitle] = useState('');
useEffect(() => {
setLoading(true);
fetch(`https://cnodejs.org/api/v1/topics?page=${pageId}`)
.then(response => response.json())
.then(data => {
setTitle(data.data[0].title);
setLoading(false);
});
}, [pageId]);
return [loading, title]
}
结束。。。
