React的状态管理

前言

学无止境，无止境学。坚持每天学点编程知识，坚持每天写点小文章，坚持每天进步一点点。大家好，我是张大鹏，喜欢学习和分享，希望能够通过此公众号，将自己学到的东西分享给大家，和大家一起交流，一起成长，一起进步。

乾坤未定，你我皆是黑马。大鹏一日同风起，扶摇直上九万里。宝剑锋从磨砺出，梅花香自苦寒来。不积跬步，无以至千里，不积小流无以成江海。

如果有多余的时间，就坚持学习吧，小时候学习改变命运，长大了学习丰富内涵，老了学习带来宁静。活到老，学到老，我能行！

概述

《React零基础入门班》收费说明：

时长：10节课

价格：1000元

内容：React从入门到项目实战

上课方式：腾讯会议小班教学

本篇文章是《React零基础入门班》的第5篇文章，前面还有：

《第一个React程序》

《React常用方法》

《React使用JSX开发菜谱应用》

《使用webpack让React模块化》

本篇将介绍React的状态管理，并使用React构建一个评分组件。

环境搭建

创建项目

npx create-react-app my-app

安装图标

参考文档：https://react-icons.github.io/react-icons/

npm i react-icons

评分组件开发

基本的评分组件

实现一个基本的星级评价组件：components/StarRating.js

import React from 'react';

import { FaStar } from 'react-icons/fa';

export default function StarRating ()

{

return [

,

,

,

,

]

}

五角星组件

创建一个可以根据是否选择来决定星星颜色的组件：components/Star.js

import from "react-icons/fa"

export default function Star() {

return (

)

}

优化评分组件

创建一个生成数组的方法：components/StarRating.js

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

修改评分组件，根据星星数量动态生成：components/StarRating.js

export default function StarRating ( { totalStars=5} )

{

return createArray(totalStars).map((n,i)=>)

}

引入hooks

引入hooks，使用状态管理星星是否被选中：components/StarRating.js

import React, { useState } from 'react';

...

export default function StarRating ( { totalStars = 5 } )

{

// 选择的星星数量

const [ selectStars ] = useState( 3 )

// 根据是否选择点亮星星

return (

{ createArray( totalStars ).map( ( n, i ) => (

i } />

) ) }

{ selectStars } / { totalStars }

)

}

五角星点击事件

给星星组件添加点击事件：components/Star.js

import from "react-icons/fa"

const Star = () => (

onClick=/>

)

评分点击事件

给星级评价组件绑定点击事件：

export default function StarRating ( { totalStars = 5 } )

{

// 选择的星星数量

const [ selectStars, setSelectedStars ] = useState( 3 )

// 根据是否选择点亮星星

return (

{ createArray( totalStars ).map( ( n, i ) => (

selected={ selectStars > i }

onSelect={ () => setSelectedStars( i + 1 ) } />

) ) }

{ selectStars } / { totalStars }

)

}

动态样式

使得星级评价组件能够接收外部传入的样式：

export default function StarRating ( { style = {},

totalStars = 5 } )

{

// 选择的星星数量

const [ selectStars, setSelectedStars ] = useState( 3 )

// 根据是否选择点亮星星

return (

{ createArray( totalStars ).map( ( n, i ) => (

selected={ selectStars > i }

onSelect={ () => setSelectedStars( i + 1 ) } />

) ) }

{ selectStars } / { totalStars }

)

}

动态属性

使得星级评价能够接收自定义的属性：

import React, from 'react';

import Star from "./Star.js"

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

export default function StarRating({

style = {},

totalStars = 5,

selectedStars = 0,

...props

}) {

// 选择的星星数量

const [selectStars, setSelectedStars] = useState(3)

// 根据是否选择点亮星星

return (

selected=

onSelect={() => setSelectedStars(i + 1)}

/>

))}

/

)

}

颜色列表组件开发

准备数据

准备颜色数据：data/color.json

[

{

"id":1,

"title":"红",

"color":"#ff0000",

"rating":5

},

{

"id":2,

"title":"绿",

"color":"#00ff00",

"rating":3

},

{

"id":3,

"title":"蓝",

"color":"#0000ff",

"rating":0

}

]

颜色组件

创建一个颜色组件：components/Color.js

import React from 'react';

import StarRating from './StarRating';

export default function Color ( { title, color, rating } )

{

return (

{ title }

)

}

颜色列表组件

创建一个颜色列表组件：components/ColorList.js

import React from 'react';

import Color from './Color';

export default function ColorList ( { colors = [] } )

{

if ( !colors.length ) return 没有颜色数据

return (

{

colors.map( color => )

}

)

}

启动测试

修改根组件

创建根组件：App.js

import { useState } from 'react';

import colorData from './data/color.json';

import ColorList from './components/ColorList';

export default function App ()

{

const [ colors ] = useState( colorData )

return

}

启动测试

npm run start

效果预览

http://localhost:3000/

总结