「React 手册 」关于组件属性(props)与状态(state)的介绍

「React 手册 」关于组件属性(props)与状态(state)的介绍大家好,在上一篇文章里,我们一起学习了如何创建第一个 React 组件,我相信通过上一篇文章的学习我们已经基本熟悉了什么是 React 组件,但是还有更多关于组件的内容值得我们去深入学习。本篇文章,我将和大家一起复习下如何使用组件的属性(p

大家好,欢迎来到IT知识分享网。

大家好,在上一篇文章里,我们一起学习了如何创建第一个 React 组件,我相信通过上一篇文章的学习我们已经基本熟悉了什么是 React 组件,但是还有更多关于组件的内容值得我们去深入学习。本篇文章,我将和大家一起复习下如何使用组件的属性(props)与状态(state)。

如何使用组件的属性(props)

和其它应用程序一样,组件应具备重用性。接下来我们将基于上一节的例子,分别创建以下组件:头部组件( Header), 内容组件(Content), 和底部组件(Footer),将其分组放置在 layout 文件夹中,通过 props 传递属性(属性或子组件),并验证属性值的合法性。

1、首先我们来看下 App.js 文件中的 Header部分:

import React from 'react'; import logo from '../shared/images/logo.svg'; import './App.css'; // 这里我们引入了 Home 组件 import Home from "./Home/Home"; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> {/* 在这里我们添加 Home 组件在页面里进行渲染*/} <Home/> </div> ); } export default App; //File: src/components/App.js 

2、接下来,我们需要将 header 内容部分拿走,放到我们的 Header 组件里,然后通过 import 的方式引入到 App.js 文件中。因为类似这样的头部、尾部组件是公共布局组件,我们需要创建一个共享布局组件目录(layout)到我们的共享目录里(src/shared/components/layout)。

3、在此之前,我们需要安装 prop-types 依赖包,因为我们需要在 Header 组件里定义属性类型及相关验证逻辑,打开控制台将其运行环境切换至项目目录,并输入以下命令完成安装:

 npm install prop-types 

4、PropTypes 最初是作为 React 核心模块之一一起发布的,将其应用到 React 组件中,我们用来判断组件的属性传递是否符合设置的预期,如果传递的属性与其不匹配,将会有警告提示。最终我们完成的 Header 组件代码如下:

import React, { Component } from "react"; import ProTypes from 'prop-types'; import logo from '../../images/logo.svg'; class Header extends Component{ // 这里定影属性类型和规则 static proTypes={ title:ProTypes.string.isRequired, url:ProTypes.string }; render() { const { title='Welcome to React', url='https://www.qianduandaren.com' } =this.props; return ( <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <a className="App-link" href={url} target="_blank" rel="noopener noreferrer" > {title} </a> </header> ); } } export default Header; //File: src/shared/components/layout/Header.js 

5、通过定义静态 PropTypes 属性对象用来验证是否符合预期,你可以定义相关的属性类型 array, bool, func, number, object, string, 和 symbol。除了这些基本类型,你还可以定义一些特殊的类型,比如 node, element, instanceOf, oneOf, oneOfType, arrayOf, objectOf, shape 和 any 等。我们可以在任何类型后添加一个 isRequired 的属性,用来验证这个类型属性是否定义,如果未定义,则会产生警告。

6、然后我们将 Header 组件添加至 App.js 文件中

import React from 'react'; import './App.css'; import Header from "../shared/components/Header/Header"; // 这里我们引入了 Home 组件 import Home from "./Home/Home"; function App() { return ( <div className="App"> <Header title="欢迎来到前端达人官网"/> {/* 在这里我们添加 Home 组件在页面里进行渲染*/} <Home/> </div> ); } export default App; //File: src/components/App.js 

小贴士:你有可能会对 <Header/> 感到迷惑,这里不同于 HTML5 的

标签,这也是为什么 React 最佳实践中要求类名或组件名首字母大写的原因吧。

7、需要给组件传递什么属性,你需要在props这个属性里进行定义,你可能注意到了我们值添加了 title 属性,因为这是唯一需要要定义的属性,url 属性是可选的,并且我们已通过解构赋值的方法将其默认赋值,这里属性值为:https://www.qianduandaren.com。接下来我们在做个尝试,如果我们将title属性和值都删掉,看看会发生什么,你会在浏览器开发者工具中看到如下图所示的提示:

「React 手册 」关于组件属性(props)与状态(state)的介绍

8、接下来我们来创建公共底部组件Footer,示例代码如下

import React,{Component} from "react"; class Footer extends Component{ render() { return ( <footer> © 前端达人 {(new Date()).getFullYear()} </footer> ); } } export default Footer; //File: src/shared/components/layout/Footer.js 

9、到目前为止,我们只是简单的向组件传递了基本的属性类型,但是我们还可以将组件作为属性值进行传递(<Component>Children Content</Component>),接下来我们来创建一个Content组件,并将 Home 做为子元素进行传递,示例代码如下:

import React,{Componnent} from 'react'; import Protypes from 'prop-types'; class Content extends Componnent{ static proTypes={ children:Protypes.element.isRequired }; render(){ const { children } = this.props; return( <main> {children} </main> ) } } export default Content; // File: src/shared/components/layout/Content.js 

10、最后,我们来修改 App.js 文件,示例代码如下:

import React from 'react'; import './App.css'; // 引入布局相关的组件 import Header from "../shared/components/Header/Header"; import Content from "../shared/components/Content/Content"; import Footer from "../shared/components/Footer/Footer"; // 这里我们引入了 Home 组件 import Home from "./Home/Home"; function App() { return ( <div className="App"> <Header title="前端达人"/> <Content> <Home/> </Content> <Footer/> </div> ); } export default App; // File: src/components/App.js 

本部分内容小节

PropTypes 验证对于开发人员非常重要,因为我们需要规范定义我们组件接收的属性类型,并严格验证是否符合预期,如果你按照上述流程操作完成,你将会看到如下图所示的内容:

「React 手册 」关于组件属性(props)与状态(state)的介绍

如你所见,我们有很多方法去传递属性给组件,同时还存在很多方法接收值,比如 Redux 和 React Router,我将会在接下来的文章里进行介绍。

如何使用状态(state)

local state 是 React 的基本功能,用于创建动态组件。每个组件都可以设置自己的 local state,你可以在组件内部初始化值,值如果发生改变时,将触发组件重新渲染。Local state 可以用于组件内部的 DOM 交互,表单的处理。如果我们想在不同组件之间共享数据,我们可以使用 Redux 状态管理,在接下来的文章里,我将会详细介绍。好了,废话不多说,我们来看看如何使用 local state 的。

我们先来为组件定义初始化状态,看看其状态更新时组件是如何渲染的。

1、我们基于 Home 组件,添加一个构造函数,并在内部定义状态并进行初始化。

import React,{Component} from "react"; // 在这里引入我们创建的 Home.css 文件 import './Home.css'; export default class Home extends Component{ constructor() { // 请注意 super() 方法需在最前面定义,必须定义 // 否则无法调用 this super(); // 这里初始化本地状态对象 this.state={ name:'阿森' }; } render() { //声明样式对象 const buttonStyle={ backgroundColor:'gray', border:'1px solid black' }; return( <div className="Home"> <h1>Welcome to Codejobs</h1> <p> In this recipe you will learn how to add styles to components. If you want to learn more you can visit our Channel at <a href="https://www.qianduandaren.com"> 前端达人</a>. </p> <p> 大家好,我叫{this.state.name},欢迎来到前端达人! </p> <p> <button style={buttonStyle}> Click me! </button> </p> </div> ); } } // File: src/components/Home/Home.js 

2、在上述代码中,我们定义了一个构造函数,并初始化了我们的本地状态,并在界面中,直接进行输出显示。请注意我们在构造函数的开头调用了super()函数,主要用于调用父构造函数(React.Component),如果你不调用的话,将会收到以下错误内容:

「React 手册 」关于组件属性(props)与状态(state)的介绍

3、在添加 super()函数 之后,我们添加了初始化状态对象:

this.state={ name:'阿森' }; 

4、接下来我们使用 this.setState() 方法来更新本地状态,目前的组件只是一个静态的组件,无法完成交互和渲染。要实现状态的更新,我们需要使用 this.setState() 方法进行状态的更新,这里我们使用 setTimeout() 函数进行状态的更新,示例代码如下:

import React,{Component} from "react"; // 在这里引入我们创建的 Home.css 文件 import './Home.css'; export default class Home extends Component{ constructor() { // 请注意 super() 方法需在最前面定义,必须定义 // 否则无法调用 this super(); // 这里初始化本地状态对象 this.state={ name:'阿森' }; } render() { //声明样式对象 const buttonStyle={ backgroundColor:'gray', border:'1px solid black' }; setTimeout(()=> { this.setState({ name: '前端达人' }); },1000); console.log('Name',this.state.name); return( <div className="Home"> <h1>Welcome to Codejobs</h1> <p> In this recipe you will learn how to add styles to components. If you want to learn more you can visit our Channel at <a href="https://www.qianduandaren.com"> 前端达人</a>. </p> <p> 大家好,我叫{this.state.name},欢迎来到前端达人! </p> <p> <button style={buttonStyle}> Click me! </button> </p> </div> ); } } // File: src/components/Home/Home.js 

5、如果你在浏览器中运行它,你将会看到状态的第一个值是”阿森“,此后每一秒钟打印出”前端达人“的值,主要是我添加了一个console.log() 方法用来记录状态值的改变,如下图所示,你在控制台将会看到以下内容:

「React 手册 」关于组件属性(props)与状态(state)的介绍

6、你可能会疑惑,为啥有这么多的打印输出,道理很简单,这是React的工作方式,每次我们更新状态时,都会导致组件重新渲染,每次渲染时,就会再次调用我们的 setTimeout() 方法,这样就导致了无限循环,一直的调用下去。这样势必会影响程序的性能,我们应该避免这样调用。那我们应该在哪合理安全只调用一次呢,这里我们用到了组件的生命周期方法,componentDidMount()方法(在组件已经完全加载到网页上才会调用被执行,所以可以保证数据的加载。此外,在这方法中调用setState方法,会触发重渲染,所以,官方设计这个方法就是用来加载外部数据用的,或处理其他的副作用代码)。关于组件生命周期的内容,在后面的文章里我会详细介绍到,这里我们只是先简单的了解下其中的一个方法,修改后的代码如下:

import React,{Component} from "react"; // 在这里引入我们创建的 Home.css 文件 import './Home.css'; export default class Home extends Component{ constructor() { // 请注意 super() 方法需在最前面定义,必须定义 // 否则无法调用 this super(); // 这里初始化本地状态对象 this.state={ name:'阿森' }; } componentDidMount() { setTimeout(()=> { this.setState({ name: '前端达人' }); },1000); } render() { //声明样式对象 const buttonStyle={ backgroundColor:'gray', border:'1px solid black' }; return( <div className="Home"> <h1>Welcome to Codejobs</h1> <p> In this recipe you will learn how to add styles to components. If you want to learn more you can visit our Channel at <a href="https://www.qianduandaren.com"> 前端达人</a>. </p> <p> 大家好,我叫{this.state.name},欢迎来到前端达人! </p> <p> <button style={buttonStyle}> Click me! </button> </p> </div> ); } } // File: src/components/Home/Home.js 

7、如果你打开浏览器开发者工具,你将会在控制台看到如下输出,从而验证是否解决了无限循环打印输出的问题:

「React 手册 」关于组件属性(props)与状态(state)的介绍

本部分小节

本地状态还经常被用于表单内容部分,这部分内容我将会在稍后的文章进行详细介绍,从上述代码中我们了解如何使用componentDidMount()方法避免无限循环的问题,这属于组件生命周期的相关内容,这部分的内容我将通过做实例的方式,进行一一详解,敬请期待。

小节

本篇文章的内容,就给大家介绍到这里,感谢你的阅读,下篇文章里我将会和大家一起学习下如何声明函数组件,敬请期待

《 React 手册》系列文章

「React 手册」在 React 项目中使用 ES6,你需要了解这些(一)

「React 手册」React 16 中值得你关注的新特性

「React 手册 」在 Windows 下使用 React , 你需要注意这些问题

「React 手册 」从创建第一个React组件开始学起

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/85286.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信