React State

一、 state

  大致思想:在 react 中,每个组件都是一个状态机,通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。

  

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
} render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
} ReactDOM.render(
<Clock />,
document.getElementById('example')
);

  以上代码,实现了加载页面时获取并显示时间的功能。

class Clock extends React.Component {
constructor(props) { // 构造器
super(props);
this.state = {date: new Date()}; // state 状态
}

// 生命周期钩子函数
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}

// 生命周期钩子函数
componentWillUnmount() {
clearInterval(this.timerID);
}

// tick 方法,在这里可以改变 state
tick() {
this.setState({
date: new Date()
});
}

// 组件渲染函数, jsx
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
} ReactDOM.render(
<Clock />,
document.getElementById('example')
);

  以上代码,实现了每秒更新页面上时间的功能。

  执行顺序如下:

    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() 这个钩子函数,定时器也就会被清除。

二、数据自顶向下流动(自父到子到孙)

  组件中 state 属性只能由拥有和设置它的组件来访问,因此,状态通常被称之为局部或者封装。

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>Hello, world!</h1>
<FormattedDate date={this.state.date} />
</div>
);
}
} ReactDOM.render(
<Clock />,
document.getElementById('example')
);

  以上代码中,将 state 中的数据传递给子组件 FormattedDate 中,而子组件不需要知道数据是来源于父组件的 state 状态 还是属性亦或是手动输入的。

  这通常被称为自顶向下或单向数据流。 任何状态始终由某些特定组件所有,并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。

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

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>Hello, world!</h1>
<FormattedDate date={this.state.date} />
</div>
);
}
} function App() {
return (
<div>
<Clock />
<Clock />
<Clock />
</div>
);
} ReactDOM.render(<App />, document.getElementById('example'));

以上实例中每个 Clock 组件都建立了自己的定时器并且独立更新。

总结:

  1.组件是有状态还是无状态被认为是可能随时间而变化的组件的实现细节。

  2.可以在有状态组件中使用无状态组件,也可以在无状态组件中使用有状态组件。

react 入坑笔记(二) - State的更多相关文章

  1. react 入坑笔记(四) - React 事件绑定和传参

    React 事件处理 建议:在了解 js 的 this 取值后食用更佳. 一.react 与 Html 中用法的异同和注意点 html 中的绑定事件的写法: <button onclick=&q ...

  2. react 入坑笔记(三) - Props

    React Props props - 参数. 组件类 React.Component 有个 defaultProps 属性,以 class xxx extend React.Component 形式 ...

  3. react 入坑笔记(五) - 条件渲染和列表渲染

    条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...

  4. react 入坑笔记(六) - 组件的生命周期

    React 组件生命周期 详细参考: react 组件生命周期 组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3. ...

  5. react 入坑笔记(一)

    一些概念: 1.组件:概念等同于 vue 中的组件,字面意思,不过 vue 中组件是以 .vue 结尾,通过 vue-loader 编译成 js,而 react 组件就是 js. 2.jsx:js 语 ...

  6. es6 入坑笔记(二)---函数扩展,箭头函数,扩展运算符...

    函数扩展 1.函数可以有默认值 function demo( a = 10,b ){} 2.函数可以使用解构 function demo( { a = 0,b = 0 } = {} ){ } 3.函数 ...

  7. oracle入坑日记<二>认识oracle(含sqlplus基础使用)

    1.SID(数据库实例) 1.1. oracle安装的时候有一项叫[全局数据库名]的填写项,这个就是oracle的SID也是数据库的唯一标识符: 1.2.一个oracle数据库有且只有一个SID(一般 ...

  8. Linux探索之路1---CentOS入坑笔记整理

    前言 上次跟运维去行方安装行内环境,发现linux命令还是不是很熟练.特别是用户权限分配以及vi下的快捷操作.于是决定在本地安装一个CentOS虚拟机,后面有时间就每天学习一点Linux常用命令. 作 ...

  9. 【React踩坑记二】react项目实现JS路由跳转

    这里使用的是4.31版本的react-router-dom "react-router-dom": "^4.3.1", 直接使用以下代码即可实现路由跳转 thi ...

随机推荐

  1. Spring(1)_Bean初始化_逻辑图

  2. Error: Cannot find module 'babel-runtime/regenerator'

    在做调用阿里云短信接口时遇到的一个问题 错误原因:没有正确安装相应的mmodule 解决办法: 第一步:在package.json中加入依赖label-runtime 第二步:在Terminal中 n ...

  3. [MicroPython]TurniBit开发板旋转按钮控制脱机摆动

    一.实验目的: ?学习在PC机系统中扩展简单I/O 接口的方法 ?学习TurnipBit拼插编程 ?了解舵机工作原理 ?学习TurnipBit扩展板舵机和旋转按钮接线方式 二.所需原器件: ?Turn ...

  4. 关于GitHub的Hello Word

    最近GitHub一直是最火的配置库技术之一,各个技术大牛也都纷纷入驻GitHub 我每天都打交道的DITA-OT开源项目也宣布迁入GitHub. 那么GitHub到底有什么过人之处呢?给各位先扫个盲. ...

  5. 提取jedis源码的一致性hash代码作为通用工具类

    一致性Hash热点 一致性Hash算法是来解决热点问题,如果虚拟节点设置过小热点问题仍旧存在. 关于一致性Hash算法的原理我就不说了,网上有很多人提供自己编写的一致性Hash算法的代码示例,我在跑网 ...

  6. Method not found: !!0[] System.Array.Empty()错误

    最近由于公司项目需要将之前支持的TLS1.0改成更安全的TLS1.2,而公司现有项目都是老系统,有的是.NET FrameWork 4.0,有的是.NET FrameWork3.5,但是TLS1.2默 ...

  7. Python“Non-ASCII character 'xe5' in file”报错问题

    今天在编译一个Python程序的时候,一直出现“Non-ASCII character 'xe5' in file”报错问题 SyntaxError: Non-ASCII character '\xe ...

  8. Python_生产者消费者模型、管道、数据共享、进程池

    1.生产者消费者模型 生产者 —— 生产数据的人 消费者 —— 消费数据的人 生产者消费者模型:供销数据不平衡的现象. import time import random from multiproc ...

  9. rest-framework频率组件

    throttle(访问频率)组件 1.局部视图throttle from rest_framework.throttling import BaseThrottle VISIT_RECORD={} c ...

  10. 福州大学软件工程1816 | W班 第6次作业WordCount成绩排名

    作业链接 WordCount进阶需求 评分细则 本次个人项目分数由两部分组成(博客分满分40分+程序得分满分60分) 博客评分细则(满分60,最终折算为40分) 在文章开头给出结对同学的博客链接.本作 ...