对于习惯vue和react的class 基于生命周期开发的同学来说,在开始使用Hooks的时候,总
是会把class开发和 Hooks开发进行一一的比对,希望在hooks中找到class开发对应的替代
方式,也许这种想法就是有问题的。
学习Hooks前,可以忘记你的class写法。
最简单的Hooks
class 版本的有状态组件:
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
再来看看hooks后的版本:
import React, { useState } from 'react';
function Example() {
// 声明一个新的叫做 “count” 的 state 变量
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
声明变量:
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
}
useState 方法作用和class的 this.state
提供的功能完全相同。
唯一参数就是初始state,返回值是一个数组,数组第一个项目是变量,第二项是的改变改值的方法。
解构出来 count
和 setCount
相当于class组件的
this.state.count
和 this.setState
一个组件有多个状态值怎么办
function ExampleWithManyStates() {
// 声明多个 state 变量
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: '学习 Hook' }]);
}
useEffect
useEffect(createHandle, [deps])
官方解释:
该 Hook 接收一个包含命令式、且可能有副作用代码的函数。
在函数组件主体内(这里指在 React 渲染阶段)改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的,因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。
使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在 组件渲染到屏幕之后执行
。
可以注意到,useEffect的函数是在的组件渲染到DOM后执行。 useEffect的第二个参数deps, 只是createHandle 执行的 条件:
[]: 首次渲染执行
[stateA]: 变量stateA 变化才执行
[stateA, stateB]: 变量stateA 或 stateB 变化时就执行
没有值: 每次渲染后都会执行
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
}, [count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
正确的应用useState
和useEffect
, 能够完成很多基本的需求。
其他的Hook,可以根据需求酌情使用
参考资料 使用 Effect Hook: react.docschina.org/docs/hooks-… React技术揭秘: react.iamkasong.com/
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!