前边的ReactJS基础,我们可以了解到,对于React,可以说是万物皆组件

React的组件应该具有 可组合(Composeable)可重用(Reusable)可维护(Maintainable)的特征,所以我们尽量将组件最小化,写的尽可能的小

前边已经介绍了组件的写法,下面我们来进一步了解一下组件的属性、状态、生命周期和嵌套

组件的属性

我们来编写一个组件SayHello,有一个name属性,然后输出hello + name的值,代码如下:

var SayHello = React.createClass({
render:function(){
return <h1 style={{color:"red"}}>hello {this.props.name}</h1>
}
}); ReactDOM.render(
<SayHello name="lyx" />,
document.getElementById('great')
)

结果

有些细节需要注意:

1.创建的组件名称首字母必须大写。
2.<SayHello name="lyx" />与 document.getElementById('great')之间用的是逗号分隔

3.获取属性的值用的是 this.props.属性名

4.组件的style属性的设置方式也值得注意,要写成style={{width:“”100"}}这种形式

 组件的状态

组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。我们来看代码

var Counter = React.createClass({
getInitialState: function () {
return { clickCount: 0 };
},
handleClick: function () {
this.setState(function(state) {
return {clickCount: state.clickCount + 1};
});
},
render: function () {
return (<h2 onClick={this.handleClick}>点我!点击次数为: {this.state.clickCount}</h2>);
}
});

上面代码实现的是点击h2,显示点击次数,效果如图所示

需要注意是的是

1.getInitialState函数必须有返回值,可以是NULL或者一个对象。

2.访问state的方法是this.state.属性名。

3.变量用 { }包裹,不需要再加双引号。

组件的嵌套

前边我们说了,组件要有复用的特点,线面来看一下如何复用

来看下边的代码

var Form= React.createClass({
render:function(){
return <div>
{this.props.inputName}:<input type="text"/> </div>
}
});
var Iname= React.createClass({
render : function(){
return <div>
<h3>欢迎</h3>
<Form inputName="姓名"/>
<Form inputName="电话"/>
<button>submit</button>
</div>
}
});
ReactDOM.render(
<Iname />,
document.getElementById('sub')
)

这里我们创建了一个Form组件,然后又创建了一个Iname组件,然后我们在Inmae组件中调用Form组件两次,这里我们通过属性inputName传入值

组件生命周期

组件的生命周期可分成三个状态:

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM

生命周期的方法有:

componentWillMount 在渲染前调用,在客户端也在服务端。

componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

componentWillReceiveProps 在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

这些就跟PHP中的一些魔术方法一样,满足条件自动调用,

下面以componentDidMount方法为例,

var Hello = React.createClass({
getInitialState: function () {
return {
color: "red"
};
}, componentDidMount: function () { alert("111"); }, render: function () {
return (
<div style={{color: this.state.color}}>
Hello {this.props.name}
</div>
);
}
});

此方法是第一次渲染后调用,就有如下结果

ReactJS基础(续)的更多相关文章

  1. ReactJS基础视频教程

    React是什么?React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库.Facebook开源了React,这是该公司用于构建反应式图形界面的JavaScrip ...

  2. 2.ReactJS基础(虚拟DOM,JSX语法)

    将脚手架(create-react-app)创建的todolist项目精简为hello world示例 即,删除自动生成的样式文件.logo.svt.App.test.js.serviceWorker ...

  3. 【JavaScript】ReactJS基础

    初探React,将我们的View标签化 前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的 ...

  4. 【T_SQL】 基础 续+++

    十五.T-SQL 编程 1.变量 (1)局部变量                    A.局部变量必须以标记@作为前缀 ,如@age.                    B.局部变量的使用也是先 ...

  5. 【T_SQL】基础 续+

    十.模糊查询 1.LIKE --查询时,字段中的内容并不一定与查询内容完全匹配,只要字段中含有这些内容. SELECT StuName AS 姓名 FROM Stuinfo WHERE stuname ...

  6. jQuery基础知识--Form基础(续)

    下拉框应用 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  7. 1. ReactJS基础(开发环境搭建)

    本文主要介绍通过React官方提供的create-react-app脚手架进行开发环境的搭建. 1.安装node环境(安装过程这里不做介绍,可参考其他博文) 在cmd中输入node -v 如果可以看到 ...

  8. reactJs 基础

    react不是一个完整的mvc,mvvm框架. react跟web components 不冲突  背景原理:基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React ...

  9. Django 之基础续

    1.路由系统之动态路由 前言:还记得之前的分页效果,这个如何实现呢?答案就是动态路由. url(r'^detail/(\d+)/$', views.detail), url(r'^detail2/(\ ...

随机推荐

  1. Java图书管理系统(用Java常用集合实现)

    图书管理系统 一.需求说明 1.功能:登录,注册,忘记密码,管理员管理,图书管理. 2.管理员管理:管理员的增删改查. 3.图书管理:图书的增删改查. 4.管理员属性包括:id,姓名,性别,年龄,家庭 ...

  2. vgrant使用简易教程

    认识vagrant vagrant用于创建和部署虚拟化开发环境 避免了多次重新配置环境 节约了开发时间,同时可以体验不同的操作系统 对于新手也是一个不错的方式,当我们配置出错,直接删除重新安装即可 准 ...

  3. 【WPF MaterialDesign 示例开源项目】 Work Time Manager

    转岗写了将近一年的 PHP 最近因为 工作太多太杂, 在汇报工作的时候经常会忘记自己做了些什么,本来想只是使用excel来记录,但是发现了excel的很多局限性,光是无法共享就郁闷死了,习惯了下班不带 ...

  4. 【css3网页布局】flex盒子模型

    1.0 前言 网页布局(layout)是CSS的一个重点应用. 经典布局类型: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊 ...

  5. File 常用方法

    1.判断当前文件是否封装的文件夹目录 //返回true--是,false--不是 File file =new File("C:\\Users\\mac\\Desktop\\复习.txt&q ...

  6. Cohort Analysis and LifeCycle Grids mixed segmentation with R(转)

    This is the third post about LifeCycle Grids. You can find the first post about the sense of LifeCyc ...

  7. 【源码解析】BlockManager详解

    1 Block管理模块的组件和功能 BlockManager:BlockManager源码解析 Driver和Executor都会创建 Block的put.get和remove等操作的实际执行者 Bl ...

  8. 遇到bug我会怎么做

    我今天遇到一个问题,ztree显示数据,本来这个功能是没有问题的,但是当我新加入了几个页面筛选条件时,将集合传入ztree ,页面缺一直没显示出来,弄了两个小时,代码我都仔细排查了一次,发现没有问题, ...

  9. thphp5.0学习笔记(一)

    1.目录结构: 其中thinkphp子目录是框架核心目录 thinkphp结构: 2.入口文件 默认自带的入口文件位于public/index.php 应用目录为application,其结构: in ...

  10. Azure经典门户创建VM,如何设置使用静态IP地址?

    使用 Azure 经典管理门户中创建的虚拟机,无法使用静态IP 地址,在管理界面没有该设置.在新的管理门户中虽然有使用静态IP的设置,但是选项是灰色,无法修改,提示错误:This virtual ma ...