react基础篇二
组件 & Props & 生命周期
组件可以将UI切分成一些独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。
组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。
组件好处:
1. 高内聚 2. 自定义标签 3.作用域独立 4. 规范化接口 5. 可相互组合
定义组件的方式:函数定义/类定义组件
函数:轻 没有状态 没有生命周期
类:重 有状态 有周期
定义一个组件最简单的方式是使用JavaScript函数:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
该函数是一个有效的React组件,它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件,是因为从字面上来看,它就是一个JavaScript函数。
你也可以使用 ES6 class 来定义一个组件:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
上面两个组件在React中是相同的。
Props的只读性
无论是使用函数或是类来声明一个组件,它决不能修改它自己的props。来看这个sum
函数:
function sum(a, b) {
return a + b;
}
类似于上面的这种函数称为“纯函数”,它没有改变它自己的输入值,当传入的值相同时,总是会返回相同的结果。
与之相对的是非纯函数,它会改变它自身的输入值:
function withdraw(account, amount) {
account.total -= amount;
}
React是非常灵活的,但它也有一个严格的规则:
所有的React组件必须像纯函数那样使用它们的props。
Props的默认值和验证
属性默认值
你可以通过配置 defaultProps
为 props
定义默认值:
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
} // 为属性指定默认值: 函数和class方式
Greeting.defaultProps = {
name: 'Stranger'
}; // 渲染 "Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
如果你在使用像 transform-class-properties 的 Babel 转换器,你也可以在React 组件类中声明 defaultProps
作为静态属性。这个语法还没有最终通过,在浏览器中需要一步编译工作。更多信息,查看类字段提议。
class Greeting extends React.Component {
static defaultProps = {
name: 'stranger'
} render() {
return (
<div>Hello, {this.props.name}</div>
)
}
}
defaultProps
用来确保 this.props.name
在父组件没有特别指定的情况下,有一个初始值。类型检查发生在 defaultProps
赋值之后,所以类型检查也会应用在 defaultProps
上面。
利用class建立一个Clock的组件
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
} render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
} ReactDOM.render(
<Clock />,
document.getElementById('root')
);
使用生命周期改造之后的组件
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>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
} ReactDOM.render(
<Clock />,
document.getElementById('root')
);
现在时钟每秒钟都会执行。
让我们快速回顾一下发生了什么以及调用方法的顺序:
当
<Clock />
被传递给ReactDOM.render()
时,React 调用Clock
组件的构造函数。 由于Clock
需要显示当前时间,所以使用包含当前时间的对象来初始化this.state
。 我们稍后会更新此状态。React 然后调用
Clock
组件的render()
方法。这是 React 了解屏幕上应该显示什么内容,然后 React 更新 DOM 以匹配Clock
的渲染输出。当
Clock
的输出插入到 DOM 中时,React 调用componentDidMount()
生命周期钩子。 在其中,Clock
组件要求浏览器设置一个定时器,每秒钟调用一次tick()
。浏览器每秒钟调用
tick()
方法。 在其中,Clock
组件通过使用包含当前时间的对象调用setState()
来调度UI更新。 通过调用setState()
,React 知道状态已经改变,并再次调用render()
方法来确定屏幕上应当显示什么。 这一次,render()
方法中的this.state.date
将不同,所以渲染输出将包含更新的时间,并相应地更新DOM。一旦
Clock
组件被从DOM中移除,React会调用componentWillUnmount()
这个钩子函数,定时器也就会被清除。
正确地使用状态
关于 setState()
这里有三件事情需要知道
不要直接更新状态
例如,此代码不会重新渲染组件:
// Wrong
this.state.comment = 'Hello';
应当使用 setState()
:
// Correct
this.setState({comment: 'Hello'});
构造函数是唯一能够初始化 this.state
的地方。
状态更新可能是异步的
React 可以将多个setState()
调用合并成一个调用来提高性能。
因为 this.props
和 this.state
可能是异步更新的,你不应该依靠它们的值来计算下一个状态。
例如,此代码可能无法更新计数器:
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
要修复它,请使用第二种形式的 setState()
来接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数,将此次更新被应用时的props做为第二个参数:
// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
数据自顶向下流动
父组件或子组件都不能知道某个组件是有状态还是无状态,并且它们不应该关心某组件是被定义为一个函数还是一个类。
这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外,其它组件不可访问。
组件可以选择将其状态作为属性传递给其子组件:
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
这也适用于用户定义的组件:
<FormattedDate date={this.state.date} />
FormattedDate
组件将在其属性中接收到 date
值,并且不知道它是来自 Clock
状态、还是来自 Clock
的属性、亦或手工输入:
function FormattedDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
这通常被称为自顶向下
或单向
数据流。 任何状态始终由某些特定组件所有,并且从该状态导出的任何数据或 UI 只能影响树中下方
的组件。
如果你想象一个组件树作为属性的瀑布,每个组件的状态就像一个额外的水源,它连接在一个任意点,但也流下来。
为了表明所有组件都是真正隔离的,我们可以创建一个 App
组件,它渲染三个Clock
:
function App() {
return (
<div>
<Clock />
<Clock />
<Clock />
</div>
);
} ReactDOM.render(
<App />,
document.getElementById('root')
);
每个 Clock
建立自己的定时器并且独立更新。
在 React 应用程序中,组件是有状态还是无状态被认为是可能随时间而变化的组件的实现细节。 可以在有状态组件中使用无状态组件,反之亦然。
react基础篇二的更多相关文章
- php基础篇-二维数组排序 array_multisort
原文:php基础篇-二维数组排序 array_multisort 对2维数组或者多维数组排序是常见的问题,在php中我们有个专门的多维数组排序函数,下面简单介绍下: array_multisort(a ...
- react基础用法二(组件渲染)
react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 /> ...
- Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...
- JavaScript笔记基础篇(二)
基础篇主要是总结一些工作中遇到的技术问题是如何解决的,应为本人属于刚入行阶段技术并非大神如果笔记中有哪些错误,或者自己的一些想法希望大家多多交流互相学习. 1.ToFixed()函数 今天在做Birt ...
- Qt入门之基础篇 ( 二 ) :Qt项目建立、编译、运行和发布过程解析
转载请注明出处:CN_Simo. 题解: 本篇内容主讲Qt应用从创建到发布的整个过程,旨在帮助读者能够快速走进Qt的世界. 本来计划是讲解Qt源码静态编译,如此的话读者可能并不能清楚地知道为何要静态编 ...
- NIO相关基础篇二
转载请注明原创出处,谢谢! 上篇NIO相关基础篇一,主要介绍了一些基本的概念以及缓冲区(Buffer)和通道(Channel),本篇继续NIO相关话题内容,主要就是文件锁.以及比较关键的Selecto ...
- docker+k8s基础篇二
Docker+K8s基础篇(二) docker的资源控制 A:docker的资源限制 Kubernetes的基础篇 A:DevOps的介绍 B:Kubernetes的架构概述 C:Kubernetes ...
- Python基础篇(二)_基本数据类型
Python基础篇——基本数据类型 数字类型:整数类型.浮点数类型.复数类型 整数类型:4种进制表示形式:十进制.二进制.八进制.十六进制,默认采用十进制,其他进制需要增加引导符号 进制种类 引导符号 ...
- node基础篇二:模块、路由、全局变量课堂(持续)
今天继续更新node基础篇,今天主要内容是模块.路由和全局变量. 模块这个概念,在很多语言中都有,现在模块开发已经成为了一种潮流,它能够帮助我们节省很多的时间,当然咱们的node自然也不能缺少,看下例 ...
随机推荐
- [Usaco2010 Mar]gather 奶牛大集会
[Usaco2010 Mar]gather 奶牛大集会 题目 Bessie正在计划一年一度的奶牛大集会,来自全国各地的奶牛将来参加这一次集会.当然,她会选择最方便的地点来举办这次集会.每个奶牛居住在 ...
- java.awt.headless 参数说明
在使用Java处理图形应用时,经常有人推荐设置 -Djava.awt.headless=true,具体含义和效果查了一下,记录在这里分享 Headless模式是系统的一种配置模式.在该模式下,系统缺少 ...
- hdu 4280
题意:求XY平面上最左边的点到最右边的点的最大流. 分析:数据量大,EK算法TLE,要用SAP算法.SAP算法用的是 http://www.cnblogs.com/kuangbin/archive/2 ...
- Blue Jeans POJ 3080 寻找多个串的最长相同子串
Description The Genographic Project is a research partnership between IBM and The National Geographi ...
- N天学习一个linux命令之du
用途 统计文件或者目录占用硬盘空间大小 用法 du [OPTION] [FILE]du [OPTION] --files0-from=F 常用参数 -a, --all统计所有文件,不仅仅是目录 -b, ...
- web项目log日志查看分析->流程理解
1.DEBUG [2017-07-10 11:38:41,705][] org.springframework.web.servlet.DispatcherServlet:865 - Dispatch ...
- Linux vim 入门 配置 及 使用初步
网上能够找到的,关于VI的教程,更是多为能吓死人的上百页说明.事实上, 从我个人的实践看,全然不须要如此夸张.要完毕最主要的编辑.仅仅要熟悉几个命令,就是把VIM用得非常好. 这里就列举一下: Esc ...
- 1.7-BGP⑤
BGP Attributes/BGP属性 (通过BGP的属性,实现对BGP路由的选择/操纵) BGP Route Selection/BGP的选路原则: 1: The BGP forwarding t ...
- 《Android源代码设计模式解析与实战》读书笔记(十八)
第十八章.代理模式 代理模式也称托付模式,是结构型设计模式之中的一个.是应用广泛的模式之中的一个. 1.定义 为其它对象提供一种代理以控制对这个对象的訪问. 2.使用场景 当无法或不想直接訪问某个对象 ...
- Android Studio第一次启动的Fetching android sdk component information的问题
1)进入刚安装的Android Studio文件夹下的bin文件夹.找到idea.properties文件,用文本编辑器打开. 2)在idea.properties文件末尾加入一行: disable. ...