夜光带你走进React.js（七）擅长的领域

最新推荐文章于 2023-10-23 21:30:07 发布
最新推荐文章于 2023-10-23 21:30:07 发布
阅读量112 收藏
点赞数
分类专栏： Genius-React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41987706/article/details/102514222
版权

夜光序言：

 

一条路，人烟稀少，孤独前行。却不得不坚持前行。因为它的尽头，种着理想。

 

 

 

 

 

 

正文：

React State(状态)

React 把组件看成是一个状态机（State Machines）。

通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

我们创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。

添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>夜光</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
    class Clock extends React.Component {
        constructor(props) {
            super(props);
            this.state = {date: new Date()};
        }
        render() {
            return (
                <div>
                    <h1>genius</h1>
                    <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
                </div>
            );
        }
    }
    ReactDOM.render(
        <Clock />,
        document.getElementById('example')
    );
</script>

</body>
</html>

上面的是不会自动更新时间的

 

接下来，我们将使Clock设置自己的计时器并每秒更新一次。

将生命周期方法添加到类中

在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。

每当 Clock 组件第一次加载到 DOM 中的时候，我们都想生成定时器，这在 React 中被称为挂载。

同样，每当 Clock 生成的这个 DOM 被移除的时候，我们也会想要清除定时器，这在 React 中被称为卸载。

我们可以在组件类上声明特殊的方法，当组件挂载或卸载时，来运行一些代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>夜光</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
    class Clock extends React.Component {
        constructor(props) {
            super(props);
            this.state = {date: new Date()};
        }

        componentDidMount() {
            this.timerID = setInterval(
                () => this.tick(),
                1000
            );
        }

        componentWillUnmount() {
            clearInterval(this.timerID);
        }

        tick() {
            this.setState({
                date: new Date()
            });
        }

        render() {
            return (
                <div>
                    <h1>reactjs 动态时钟</h1>
                    <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
                </div>
            );
        }
    }

    ReactDOM.render(
        <Clock />,
        document.getElementById('example')
    );
</script>

</body>
</html>

解析：

componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。

在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。

this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。

代码执行顺序：

  1. 当 <Clock /> 被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数。 由于 Clock 需要显示当前时间，所以使用包含当前时间的对象来初始化 this.state 。 我们稍后会更新此状态。

  2. React 然后调用 Clock 组件的 render() 方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 Clock 的渲染输出。

  3. 当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子。 在其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 tick()。

  4. 浏览器每秒钟调用 tick() 方法。 在其中，Clock 组件通过使用包含当前时间的对象调用 setState() 来调度UI更新。 通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么。 这一次，render() 方法中的 this.state.date 将不同，所以渲染输出将包含更新的时间，并相应地更新 DOM。

  5. 一旦 Clock 组件被从 DOM 中移除，React 会调用 componentWillUnmount() 这个钩子函数，定时器也就会被清除。

 

数据自顶向下流动

父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。

这就是为什么状态通常被称为局部或封装。【有点意思】

 

除了拥有并设置它的组件外，其它组件不可访问。

我们下面： FormattedDate 组件将在其属性中接收到 date 值，并且不知道它是来自 Clock 状态、还是来自 Clock 的属性、亦或手工输入：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>夜光</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
    function FormattedDate(props) {
        return <h2>现在是 {props.date.toLocaleTimeString()}.</h2>;
    }

    class Clock extends React.Component {
        constructor(props) {
            super(props);
            this.state = {date: new Date()};
        }

        componentDidMount() {
            this.timerID = setInterval(
                () => this.tick(),
                1000
            );
        }

        componentWillUnmount() {
            clearInterval(this.timerID);
        }

        tick() {
            this.setState({
                date: new Date()
            });
        }

        render() {
            return (
                <div>
                    <h1>genius</h1>
                    <FormattedDate date={this.state.date} />
                </div>
            );
        }
    }
    ReactDOM.render(
        <Clock />,
        document.getElementById('example')
    );
</script>

</body>
</html>

这通常被称为自顶向下或单向数据流。

 

任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。

我们可以：

想象一个组件树作为属性的瀑布，每个组件的状态就像一个额外的水源，它连接在一个任意点，但也流下来。

为了表明所有组件都是真正隔离的，我们可以创建一个 App 组件，它渲染三个Clock：

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>夜光</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
    function FormattedDate(props) {
        return <h2>现在是 {props.date.toLocaleTimeString()}.</h2>;
    }

    class Clock extends React.Component {
        constructor(props) {
            super(props);
            this.state = {date: new Date()};
        }

        componentDidMount() {
            this.timerID = setInterval(
                () => this.tick(),
                1000
            );
        }

        componentWillUnmount() {
            clearInterval(this.timerID);
        }

        tick() {
            this.setState({
                date: new Date()
            });
        }

        render() {
            return (
                <div>
                    <h1>genius</h1>
                    <FormattedDate date={this.state.date} />
                </div>
            );
        }
    }
    function App() {
        return (
            <div>
                <Clock />
                <Clock />
                <Clock />
            </div>
        );
    }
    ReactDOM.render(<App />, document.getElementById('example'));
</script>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

GeniusTeam-夜光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React函数式组件之useState用法
XiaoBaiGeYHS的博客
10-04 2508
自React版本16.8之后， 增加了Hook的新特性，其中包含有useState，useEffect，useContex的3种新方式。 众所周知，在React中一切元素都是组件化编程模式，主要有2种组件定义方式，一种是在es6语法下通过class类提供的继承自React.Component 的定义方式，还有一种是函数式组件，即如以function定义的函数组件。 目录： 一.React安装相关 1.React基本介绍和安装步骤说明 1.1.React基本介绍 1.2.安装Node和npm.
React-54：stateHook（让函数式组件能够使用state）
Always-Learning
04-20 361
什么是Hook? Hook是React 16.8.0版本新增的新语法 可以让使用者在函数组件中使用state以及其他的react特性 使用useState 使用数组的解构赋值，数组的解构赋值不需要和原本的名字一致 0,'xidian’是我们的初始化状态，setXxx则是方法 两种改变状态的写法 ...
react——组件 state
ass_ace
08-31 946
1. 设计合适的state   一个组件的任何UI改变都可以从state的变化中反应出来，一个合适state必须代表一个组件的UI呈现的最小状态集。即state中所有的状态都用于表现UI的变化，没有任何多余的状态；也不应该包含任何可以由其他状态计算可以得到的中间状态。 栗子： 假设需要开发一个购物车组件，需要展示的信息有购买的物品列表以及物品的总价格。设计 state如下： { p...
React复习函数组件，类组件，state
weixin_44428467的博客
06-23 179
JSX 语法规则 跟标签只有一个 标签必须闭合 内联样式style={{}} 类名：className。 标签中混入js表达式时，使用{} 标签首字母 （1）小写转换为html中的同名标签，若没有，则报错 （2）若为大写，react就去渲染对应的组件。若组件没有定义，就报错。 函数式组件： function MyComment(){ return <h2> 这是用函数式声明定义的组件</h2> } ReactDOM.render(<MyComm
【React】深入理解React组件状态State
最新发布
山赶着山，山山漫漫结成关
10-23 949
定义一个合适的State，是正确创建组件的第一步。State必须能代表一个组件UI呈现的完整状态集，即组件的任何UI改变，都可以从State的变化中反映出来；同时，State还必须是代表一个组件UI呈现的最小状态集，即State中的所有状态都是用于反映组件UI的变化，没有任何多余的状态，也不需要通过其他状态计算而来的中间状态。
react.js、react-dom.js、babel.js文件包下载
02-22
React.js、react-dom.js和babel.js是开发基于React的应用程序时不可或缺的JavaScript库和工具。在深入探讨这些文件之前，让我们先理解React的基本概念。React是由Facebook开发的一个用于构建用户界面的JavaScript库...
react下的react.min.js和react-dom.js
04-24
React是Facebook开发的一个用于构建用户界面的JavaScript库，尤其适合构建单页应用（SPA）。它主要关注视图层，但也可以与其他库或框架配合使用，形成完整的MVC（模型-视图-控制器）架构。在React生态系统中，`react...
react下载,包括react.development.js;babel.min.js;react-dom.development.js
11-20
React是当前Web开发中最流行的JavaScript库之一，尤其在构建用户界面方面起着核心作用。它引入了一种叫做JSX的语法扩展，使得HTML和JavaScript能够更好地融合在一起，为开发组件化、可重用的前端应用提供了强大的...
react.development.js
10-15
听说你在找react.development.js这个文件，在带走它前记得收藏加点赞
react-qr:React.js QR Code组件
05-18
Reactqr 一个React.js QR Code组件安装 npm i --save react-qr用法 var QRCode = require ( 'react-qr' )var component = React . createClass ( { render ( ) { ...
React组件三大核心属性(一)——state
hhhcbw的博客，欢迎各位来访
03-18 1289
state 是组件对象最重要的属性，值是对象（可以包含多个 key-value 的组合）。组件被称为 “状态机”，通过更新组件的 state 来更新对应的页面显示（重新渲染组件） 实例 我们希望实现默认展示天气(炎热/凉爽)，点击文字可以切换天气。 准备 <!-- 准备好一个容器 --> <div id="test"></div> <!-- 引入react核心库 --> <script type="text/ja.
【react全家桶学习】react中组件定义及state属性(超详/必看)
蜗牛~~
04-26 2374
重点是这一句：this.testFunc = this.testFunc.bind(this) 代表的含义就是，将原型上的testFunc函数通过bind改变this指向（使其指向index组件实例）返回一个新的函数重新赋值给testFunc函数，这样testFunc函数的this指向就正常了、那构造器的this以及render中的this均指向index组件实例，怎么就函数的this出现了undefined？2、组件是用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
React 组件的三大核心属性之 state 在函数式组件中的基本使用
m0_50163856的博客
02-07 2035
使用Hook可以在函数式组件中使用state import React, {useState} from 'react' import {Button} from "antd"; export default function FuncCompDemo(props) { const initCount = 0; /** * @param 初值 * @return 数据和修改数据的function */ const [count, setCount]
React基础—state组件使用及分类
梦否
05-27 541
1. setState的简单实践和理解 比如说，我们需要定义一个列表组件。当点击奇数列表的时候随机调换一下顺序；当点击偶数列表的时候在其后加=和不加=号之间切换。 1.1 代码实现 <body> <div id="test"></div> <script crossorigin src="./js/react.development.js"></script> <script crossorigin src="./js/react-dom.
11、react 使用 state
大家好，我是 ed.
09-15 532
之前说函数式组件和类式组件的时候我们说过，主要实现的定义，主要实现的定义，那什么是简单组件，什么是复杂组件，其实很简单，就是我们今天要了解的 。简单点说：好了，我们知道通过 的有无来判断你的组件是不是复杂组件，那新的问题又来了，什么状态 ？【理解一下】打个比方：OK，仔细理解上面这个例子，我们可以得出一个结论： 是有 的，人的 状态 会 。同样， 也是有 的，状态 会 。简单理解：接下来写一个案例，然后我们通过这个案例把 state 相关的基础东西都说一下。 一个页面，内容很简单，就是一个单纯的
react教程之this.state
沈斯明技术博客
11-30 3580
this.state 组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI （查看 demo08 ）。 var LikeButton = React.createClass({ getInitialState: function() { return {liked: false
React中state状态详解
月光晒了很凉快的博客
09-22 3265
修改 state 中的 num 属性数据的同时，让视图更新，用到专门用来修改 state 中数据的方法 setState。
React学习——三大属性之一 state
weixin_39927469的博客
07-07 1550
React基础学习。学习三大属性之一，state。主要用于表示状态。
快速掌握React.js与React Native：构建高效应用指南
《React.js essentials》是一本实用的资源，不仅适合初学者快速入门，也适合有经验的开发者深化理解和探索React生态系统，特别是React Native领域。如果你希望在现代前端开发中站稳脚跟，并进军移动开发，那么这本书...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值