- Objective: - Breadcrumb: # 概念阐释 ## 语义 `useState`允许向组件添加状态变量，当我们调用`useState()`时，它会返回[[JavaScript 数组]]，包含 2 个数组值，当前的状态和设置的状态。状态钩子允许我们在 React 函数组件中，以 state 的形式管理动态数据（例如，表单数据）/ ## 语法 ```jsx import React, { useState } from 'react'; //导入状态变量 const [currentState, setCurrentState] = useState(initialState);//返回数组,const 与[]之间必须空格 ``` - `currentState` 原始状态 - `setCurrentState`更新后的状态 # 实例 ```jsx import React, {useState} from 'react'; const colorNames = ['Aquamarine', 'BlueViolet', 'Chartreuse', 'CornflowerBlue', 'Thistle', 'SpringGreen', 'SaddleBrown', 'PapayaWhip', 'MistyRose']; export default function ColorPicker() { // call useState and assign its return values to `color` and `setColor` const [color,setColor] = useState(); const divStyle = {backgroundColor: color};// 根据 `color` 状态的当前值动态设置背景颜色，初始值是默认的白色 return ( <div style={divStyle}> <p>The color is {color}</p> {colorNames.map((colorName)=>( <button onClick={()=>setColor(colorName)} key={colorName}> //setCurrentState()中添加的是固定的数组值 - {colorName} </button> )} </div> ); } ``` - `button`组件返回一个包含多个按钮的 `div` 元素。每个按钮在被点击时会使用`.map()`方法和 `setColor()` 来更新状态，创建每一个`colorName`的数组值 ，从而改变 `div` 的背景颜色。 - [[JSX .map]]的箭头后面使用`{}`还是`()`取决于代码的复杂度，如果直接返回 html 标签使用`()`,如果还有其他的逻辑，则使用`return {}` # 相关内容 ## 状态初始值 - 为状态设定一个初始值，如果没有就设`(null)`，如果不定义会返回`undefined`，用户会困惑。 ```jsx const [color, setColor] = useState('Tomato'); ``` # 参考资料 - [Update Function Component State - codecademy](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-function-components-and-hooks-a2dba9bf-fc64-4118-8656-dfdc35f9e5cc/lessons/the-state-hook/exercises/update-function-component-state) - [useState-React](https://react.dev/reference/react/useState) - [Review 实例-Codecademy](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-function-components-and-hooks-a2dba9bf-fc64-4118-8656-dfdc35f9e5cc/lessons/the-state-hook/exercises/review)