React:快速上手(1)——基础知识
React:快速上手(1)——基础知识
React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面。
JSX、元素及渲染
1、关于JSX
JSX(JavaScript XML)是JavaScript语言语法的扩展。与HTML相似,JSX提供了一种使用许多开发人员熟悉的语法来构建组件呈现的方法。 React组件通常使用JSX编写,组件也可以用纯JavaScript编写,只是太麻烦。
例如,我们使用JSX可以很轻松的描述一个视图
<div>
<p>Header</p>
<p>Content</p>
<p>Footer</p>
</div>
而如果们用纯JavaScript来描述的话,则要写大量createElement,非常不直观且很难维护。
React.createElement('div', {className: '...'},
React.createElement('p', /* ... p children ... */),
React.createElement('p', /* ... p children ... */),
React.createElement('p', /* ... p children ... */)
);
2、关于元素及渲染
元素描述了你希望在屏幕上看到的内容
const element = <h1>Hello, world</h1>;
说明:与浏览器DOM元素不同,React元素是普通对象,创建起来很廉价。
React DOM负责更新DOM以匹配React元素。
首先必须有一个容器DIV,我们将其称为“根”DOM节点,因为其中的所有内容都将由React DOM管理。
<div id="root"></div>
要将React元素呈现到根DOM节点,请将它们传递给ReactDOM.render()
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
这样以后,打开浏览器,将会显示Hello World!
3、React仅仅更新必要的内容
React DOM将元素及其子元素的状态与前一时期同元素的状态进行比较,并仅应用使DOM达到所需状态所需的DOM更新。
关于组件
1、定义组件
组件允许您将UI拆分为独立的,可重用的部分,并单独考虑每个部分。
定义组件的最简单方法是编写JavaScript函数:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
此函数是一个有效的React组件,因为它接受单个“props”(代表属性)对象参数与数据并返回一个React元素。我们称这些组件为“函数组件”,因为它们实际上是JavaScript函数。
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
2、传值到组件中
Props是React中的一个重要概念,我们可以使用props向React组件传递数据,React从props中按到数据,然后返回视图。
向一个组件传递props的方法是将数据写在组件标签的属性中。
<Square value='A' status='B' />
对于无状态函数编写的组件中获取props非常简单,只需要将props作为参数传入组件即可:
function Square(props)
{
return <p>{props.value}</p>
}
在使用类编写的组件中,需要通过this.props获取props,this表示组件实例
class Square extends React.Component{
render(){
return(
<button className='square' value='{this.props.value}'>
{this.props.status}
</button>
)
}
}
我们可以定义默认的props属性
class App extends Component {
static defaultProps = {
likedText: '取消',
unlikedText: '点赞'
}
}
3、关于组件状态
State类似于props,但它是私有的并且完全由组件控制。我们可以使用this.setState 来设置组件状态,setState 方法由父类 Component
所提供。当我们调用这个函数的时候,React.js 会更新组件的状态 state
,并且重新调用 render
方法,然后再把 render
方法所渲染的最新的内容显示到页面上。
如下是利用state特性写的计时器组件,其中componentDidMount,componentWillUnmount属于组件的生命周期方法,前者在将组件输出呈现给DOM之后被运行,后者在组件被卸载前执行。
每隔1秒,state发生改变,React重新渲染组件。
/**
* 计时器组件
*/
class MyTimer extends React.Component{
constructor(props){
super(props)
this.state={time:new Date()}
}
render(){
return(
<div>
Time is {this.state.time.toLocaleTimeString()}
</div>
)
}
componentDidMount(){
this.timeId = setInterval(()=>this.tick(),1000)
}
componentWillUnmount(){
clearInterval(this.timeId)
}
tick(){
this.setState({time:new Date()})
}
}
说明:在JavaScript类中,您需要在定义子类的构造函数时始终调用super。所有具有构造函数的React组件类都应该使用super(props)调用启动它。
注意:当我们要改变组件的状态的时候,不能直接用
this.state = xxx
这种方式来修改,如果这样做 React.js 就没办法知道你修改了组件的状态,它也就没有办法更新页面。所以,一定要使用 React.js 提供的setState
方法,它接受一个对象或者函数作为参数
Props验证
在一个健壮的程序中,任何输入都是需要验证的,组件也不例外。Props作为组件的输入,必须进行验证。验证props需要用到React.propTypes,它提供很多验证器来验证传入的数据是否合法,当传入非法数据时,控制台回抛出警告。
安装PropTypes库
npm install prop-types
指定Props的类型
PropType提供了一系列的数据类型来帮助我们限定组件的参数,如.array .bool .func .number .object .string .node .element ...
class TestApp extends React.Component {
static propTypes = {
comment: PropTypes.object.isRequired
};
render() {
const {comment} = this.props;
return (<div>{comment}</div>)
}
}
非法参数控制台抛出异常
通过 PropTypes
给组件的参数做类型限制,可以在帮助我们迅速定位错误,这在构建大型应用程序的时候特别有用;另外,给组件加上 propTypes
,也让组件的开发、使用更加规范清晰。
React:快速上手(1)——基础知识的更多相关文章
- AngularJS2.0教程(一)快速上手之基础知识
Why Angular2 Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2? 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具.随着时 ...
- React:快速上手(6)——掌握React Router
React:快速上手(6)——掌握React Router 引入Router 安装 npm install react-router-dom 基础组件 React Router中有三种类型的组件:路由 ...
- 官方 React 快速上手脚手架 create-react-app
此文简单讲解了官方 React 快速上手脚手架的安装与介绍. 1. React 快速上手脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布 ...
- React:快速上手(7)——使用中间件实现异步操作
React:快速上手(7)——使用中间件实现异步操作 本文参考链接:Stack Overflow redux-thunk 我们使用store.dispath进行派发时,只能传递一个普通对象进去,如下: ...
- React:快速上手(5)——掌握Redux(2)
React:快速上手(5)——掌握Redux(2) 本文部分内容参考阮一峰的Redux教程. React-Redux原理 React-Redux运行机制 我觉得这张图清楚地描述React-Redux的 ...
- React:快速上手(4)——掌握Redux(1)
React:快速上手(4)——掌握Redux 引入Redux 混乱的state管理 随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状 ...
- React:快速上手(3)——列表渲染
React:快速上手(3)——列表渲染 使用map循环数组 了解一些ES6 ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版.ES6 主 ...
- React:快速上手(2)——组件通信
React:快速上手(2)——组件通信 向父组件传递数据 父组件可以通过设置子组件的props属性进行向子组件传值,同时也可以传递一个回调函数,来获取到子组件内部的数据. 效果演示 子组件是输入框,父 ...
- python快速改造:基础知识
改造"Hacking"并不同于破坏"cracking" python快速改造:基础知识 一行就是一行,不管多少,不用加分号 交互式python解释器可以当作计算 ...
随机推荐
- python -> lambda与def的差别
lambda能够定义一个匿名函数.而def定义的函数必须有一个名字. 这应该是lambda与def两者最大的差别. 与Javascript不同的是,python中匿名函数与非匿名函数须要使用不同的语法 ...
- ubuntu16.0.4 update git
Ubuntu 16.04 comes with Git 2.7.x, which is a little old now. As versions 2.8 & 2.9 are not part ...
- java.lang.IllegalArgumentException: SessionContext must be an HTTP compatible implementation.:模块化本地测试shiro的一些总结
项目由于是多模块的,所以,测试的时候我想现将shiro框架进行本地测试,然后再放入框架里面,但是这个困扰我了两天了都,其实我应该想到的,只是想多试试,最后还不如多想想 先说一下系统的基本情况,项目是多 ...
- Python之Seaborn
install: pip install seaborn official examples: https://seaborn.pydata.org/examples/index.html 在mac上 ...
- 网络协议之rtp---rtp 传输视频及加密
http://read.pudn.com/downloads170/sourcecode/windows/788977/es%20ParkertTS/ESToTS.cpp__.htm http://w ...
- webpack 代码拆分(按需打包)
https://segmentfault.com/a/1190000007649417
- Jmeter JDBC执行多条SQL
今天在编写自动化回归脚本的时候,需要在jmeter的jdbc请求中执行多条sql,在百度里搜索了一些文章,按照网上提供的步骤,发现不起作用,后来发现是作者的截图误导了,为了让后面的同学少走弯路,这里我 ...
- 如何让VS检查函数和类Comment的添加情况
问题: 现在有一个大的项目,我不能确定是否每个类和函数是否已经加上了comments,是否每个comments都是标注正确的. VS中有没有检查Comments的功能? 解决方案: 1.右击proje ...
- 语法之ADO.NET
ADO.NET的概念 由于本系列并不是主讲ADO.NET.所以这里笔者只会教上面定义有线连接方式相关的类.不管如何让我们先看一下ADO.NET类相关联的所有基类吧.这样子也方便我们下面的学习. 下面是 ...
- tornado详细介绍
Tornado Web服务器概览,tornado教程,tornado开发教程 概览 漏洞 | 漏洞目录 | 安全文档 Overview 下载和安装 模块索引 主要模块 底层模块 Tornado 攻略 ...