前言
- React是主流的前端框架,其核心是组件。 - 在v16.8 版本之前,组件的标准写法是类class,但class存在一些缺点,如: 1、业务逻辑分散在各个方法中,导致重复逻辑、关联逻辑,代码量重 2、大型组件很难拆分和重构,很难测试 3、组件类引入了复杂的编程模式,比如 render props 和高阶组件 - React团队在v16.8 版本引入了React hooks。hook的汉语意思是钩子,React Hooks 的意思是,组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码"钩"进来。 - 钩子是为函数引入外部功能,React 约定,钩子一律使用use前缀命名,便于识别。React 默认提供了一些常用钩子,你也可以封装自己的钩子。一、状态钩子useState()
纯函数不能有状态,所以要把状态放在钩子里边。而useState()的作用,就是为函数组件引入状态state。
案例:实现点击按钮1次,状态+1的效果
代码示例:
import React, {
useState } from 'react';
const StateExample = () => {
const [state, setState] = useState(0); //这里给state设置初始值为0
//按钮的点击事件是名为add的函数
//每触发一次函数,状态+1
function add() {
setState(state + 1);
}
return <button onClick={
add}>点击+1 现在为:{
state}</button>;
};
export default StateExample;
二、共享状态钩子useContext()
useState()解决了组件本身的状态问题,那么要解决各个组件间状态共享就需要用到useContext()
案例:以老师给孩子们发糖,要求每个孩子糖果个数及口味一样为例,实现状态共享效果
代码示例:
import React, {
useContext } from 'react';
const SugarContext = React.createContext({
});// 在组件外部建立一个Context
const Amy = () => {