标签:count 函数 state React Hook State useState
一、简介
React Hook是React16.8的新增特性:它是一种可以让你不编写Class的情况下使用state及其他React的特性,即一种特殊的钩子函数,即钩入了React特性的函数,其实可以叫:函数组件的写法。
我的总结: 一个React页面,可以不需要定义成Class的方式,只要定义成函数模式,这个函数模式还可以获取到State,后面阿里的umi hooks和Ahooks中各个hook可以很省事写一些功能,
最终目的就是加快生产率,提升组件的复用能力,例如umi中完全不需要dva了即不需要Model文件的定义,只需要改写成hook的用法。
React自带的两个关键hook,其中一个是State Hook,另一个是Effect Hook,当然后面会去研究阿里内部用的ahooks( 非开源的umi hooks),这些hook(即特殊函数)均以use开始作为命名规范。
二、React State HooK,即在React函数组件中添加内部state的能力1.以前我们定义一个无状态组件是这样的:
const Example = (props) => {
// 你可以在这使用 Hook
return <div />;
}
或者是这样的:
function Example(props) {
// 你可以在这使用 Hook
return <div />;
}
现在我们要为这类函数引入React state的能力,所以无状态组件,可以改称为:函数组件。
2.这边有几句话要重视:
1.Hook在class内部不起作用,但可以用它们来代替class。
2.在函数组件中没有this.
3.如何使用React State,如下例子:
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>
);
}
解释:const [count, setCount] = useState(0);
- 这是一个数组解构的定义法,即useState它可以传一个参数进去,这个参数可以是数字或者字符串,其实还可以是对象和数组(但官方建议是分开成单个),例如:
const [state, setState] = useState({ left: 0, top: 0, width: 100, height: 100 });
如果要采用合并方式更新这个state中的某一些值时,即有一些值要保留,则...state是关键:
function handleWindowMouseMove(e) {
// 展开 「...state」 以确保我们没有 「丢失」 width 和 height
setState(state => ({ ...state, left: e.pageX, top: e.pageY }));
}
- 返回有两个值的数组,第一个值是当前的state,第二个值是更新state的函数,后面可以通过setState这个函数(这个名字可以随便取)去更新state的值,注意这个state每次均有上一次值的记忆的功能,不是简单的变量值。
- 读取State
A.想在 class 中显示当前的 count,我们读取 this.state.count, 例如:
<p>You clicked {this.state.count} times</p>
B.在函数中,我们可以直接用 count
:
<p>You clicked {count} times</p>
- 更新State
在 class 中,我们需要调用 this.setState()
来更新 count
值:
<button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me
</button>
在函数中,我们已经有了 setCount
和 count
变量,所以我们不需要 this
:
<button onClick={() => setCount(count + 1)}> Click me
</button>
4.Hook的使用过程有两条规则必须遵循:
(1)规则一:只在最顶层使用Hook: 不要在循环,条件或者嵌套函数中调用Hook,其实目的就是为了保证:按顺序被调用。
(2)规则二:只在React函数(即非普通函数,其实就是React函数组件中)中调用Hook:
A.在React函数组件中调用Hook
B.在自定义Hook中调用其它Hook
三、useState 初始化state的高级用法如何写一个函数,通过复杂计算,把结果作为这个state的初始值,把参数写成一个函数形式传入例如:
const [state, setState] = useState(() => {
const initialState = someExpensiveComputation(props);
return initialState;
});
四、useState如何实现合并更新state?
setState(prevState => {
// 也可以使用 Object.assign
return {...prevState, ...updatedValues};
});
五、useState和useReducer有什么区别?
useState一般用来更新单个State,useReducer一般用来更新这个State有多个子属性时。
标签:count,函数,state,React,Hook,State,useState 来源: https://blog.51cto.com/u_10976476/2845742
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。