React Hook useState – React 白話文運動 11

内容目录

序言

上一篇文章详细介绍了 React 语法， React 生命周期 – React 白话运动 10 我们了解了 React 生命周期的三个阶段，还了解了类对象和函数对象的生命周期。本篇文章将通过一个实际案例来解释 Hooks 中的 useState：

什么是 useState？
创建评估 UI 组件
该组件的重构
为该组件添加使用状态钩子
已添加 setState 作为评估组件的新修改器。
旧版本的 React 状态管理编写

什么是 useState？

useState 是 React 中的一个钩子，用于通过 useState我们可以在功能元素中定义和管理状态数据。

useState 返回包含两个值的数组：

当前状态：当首次渲染该组件时，其值将等于我们传递给 useState 的初始值
设置函数：该函数负责更新状态值并触发组件的重新渲染。

				
					const [state, setState] = useState(initialState)

创建用于评估的用户界面组件

我们将使用 Alex Banks 和 Eve Porcello 编写的 React 教程，但对部分代码进行了一些修改。

由于本篇文章的主题是创建 UI 页面，我们需要使用 react-icons 软件包，它内置了一个包含数百种 SVG 的图库。我们可以在终端输入以下命令下载 react-icons 软件包。

				
					npm i react-icons

通过构建 React 项目 - React Vernacular 活动 08 这是快速构建 react 项目的分步指南。

				
					npx create-react-app my-app cd my-app npm start

这将在本地启动一个 react 项目，然后按如下方式修改 App.js，以获得以下用户界面组件。

				
					import React from &#039;react&#039; import { FaStar } from &#039;react-icons/fa&#039; export default function App() { return (<div>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
    </div>)
}

该组件的重构

重构是指在不改变程序结果的情况下重写代码，从而提高代码的整体质量。

接下来，我们需要根据原始代码重新组织代码，使整个代码变得更加简洁。在这里，我们可以将其分为三个部分：

重组的第一步

您可以先将 FaStar 分割成不同的组件，然后为该组件赋予参数，这里给出的参数是选中的商数，默认值为 true。

				
					const Star = ({ selected = true }) => ( <FaStar color={selected ? 'red' : 'gray'}></FaStar> )

重组步骤 2

创建一个函数，在给定长度的情况下，该函数可以快速组合成一个数组。

				
					const createArray = length => [...Array(length)];

重组步骤 3

最后，在您使用的用户界面中，您使用的是 ES6 数组映射，它会在映射函数中返回相应的索引和组件。

				
					export default function App({ totalStar = 5 }) { return createArray(totalStar).map((n, i) => <Star key={i} />) }

重组完成后，原程序的执行结果不变，最后的五颗星仍会被送回。

				
					import React from 'react' import { useState } from 'react'; import { FaStar } from 'react-icons/fa' const Star = ({ selected = true }) => ( <FaStar color={selected ? 'red' : 'gray'}></FaStar> ) const createArray = length => [...Array(length)]; export default function App({ totalStar = 5 }) { const [selectedStars] = useState(3) return createArray (totalStar).map((n, i) => <Star key={i} selected={selectedStars > i} />) }

为该组件添加使用状态钩子

The refactored code does not yet have any associated data or state. Here we can use some hooks to manage the state of the function.

useState( ) 是我们学习钩子时要学习的第一个函数。我们可以使用以下语法给出组件的状态。

				
					const [variable,setVariable] = useState("");

在下面的代码示例中，我们在 App 函数中添加了一个名为 selctedStars 的新状态，并将 selctedStars 的值设置为 3。然后，我们就可以在此组件中根据此变量进行渲染。

				
					import React from 'react' import { useState } from 'react'; import { FaStar } from 'react-icons/fa' const Star = ({ selected = true }) => ( <FaStar color={selected ? 'red' : 'gray'}></FaStar> ) const createArray = length => [...Array(length)]; export default function App({ totalStar = 5 }) { const [selectedStars] = useState(3) return createArray (totalStar).map((n, i) => <Star key={i} selected={selectedStars > i} />) }

因为 selctedStars 已设置为 3，而且还在 FaStar 元素中设置了判别式。如果选中为 true，则为红色，否则为黑色，最终会得到下面的组件。

setState 新修改函数

useState( ) 不仅可以给出默认值，还可以修改默认值，修改默认值的方法是使用 setState。

在 StarRating 中，您可以添加一个新的 setSelectedStars，在组件中使用。这也为 Star 添加了一个名为 onSelect 的新函数，并将 setSelectedStars 传递进来。

				
					export function StarRating({ totalStars = 5 }) { const [selectedStars, setSelectedStars] = useState(3) return <div>
       {createArray(totalStars).map((n, i) =&gt; 
		<star 
    		key="{i}" 
    		selected="{selectedStars" > i} onSelect={() =&gt; setSelectedStars(i + 1)} /&gt; )}
        <p>
            {selectedStars} of {totalStars} stars
        </p>
    </div>
}

在这里，我们将一个名为 setSelectedStars 的函数传入 onClick 函数，这样所有星星在被点击时都会触发 setSelectedStars( )。

				
					const Star = ({ selected = true, onSelect = f => f }) => ( <FaStar color={selected ? 'red' : 'gray'} onCLick={onSelect}></FaStar> )

useState 的完整代码也附后：

				
					import React from &#039;react&#039; import { useState } from &#039;react&#039;; import { FaStar } from &#039;react-icons/fa&#039; const Star = ({ selected = true, onSelect = f =&gt; f }) =&gt; (
    <fastar color="{selected" ? 'red' : 'gray'} onclick="{onSelect}"></fastar>
) const createArray = length =&gt; [...Array(length)]; export function StarRating({ totalStars = 5 }) { const [selectedStars, setSelectedStars] = useState(3) return <div>
        {createArray(totalStars).map((n, i) =&gt; 
		<star 
    		key="{i}" 
    		selected="{selectedStars" > i} onSelect={() =&gt; setSelectedStars(i + 1)} /&gt; )}
        <p>
            {selectedStars} of {totalStars} stars
        </p>
    </div>
}

旧版本的 React 状态管理编写

旧版指的是早期的类编写方式，因为钩子只能用于函数。这个版本显示了类的状态管理，但理解起来比较困难，因为类有一些面向对象的概念。

与用于预设和更新数据状态的 useState 相比，类组件使用了一个构造函数，该构造函数可以将 starSelected 的默认值设为 0，还可以绑定到类中声明的函数 change，然后使用 render( ) 函数渲染组件。

				
					import React, { Component } from &#039;react&#039; import { FaStar } from &#039;react-icons/fa&#039; const Star = ({ selected = true }) =&gt; (
    <fastar color="{selected" ? 'red' : 'gray'}></fastar>
) const createArray = length =&gt; [...Array(length)]; export default class StarRating extends Component { constructor(props) { super(props); this.state = { starSelected: 0 }; this.change = this. change.bind(this); } change(starSelected){ this.setState({starSelected}); } render(){ const {totalStars} = this.props; const {starSelected} = this.state; return (
            <div>
                {[...Array(totalStars)].map((n,i)=&gt;{
                    <Star 
                        key={i} 
                        selected={i &lt; starSelected} onClick={()=&gt;this.change(i+1)} /&gt; })}
                <p>
                    {starSelected} of {totalStars} stars
                </p>
            </div>
        )
    }
}