React 初学整理
1,通过createElement创建元素 HELLO Word
ps:切记组建名称首字母大写
2,虚拟DOM
在虚拟DOM上操作 通过render来渲染真是DOM
3,JSX
JSX 是对JS的语法扩展,在JS中类似HTML的方法创建React
var JsxDom = React.createClass({
render:function(){
var html =<div>
</div>
return html;
}
4,Props
无状态组件 表现形式:通过外部传入的props属性,根据自身状态来做出不同的反应。
var JsxDom = React.createClass({
render:function(){
var num = this.props.set;
var style ={
'color':'red',
'fontSize':'24px' //驼峰写法
}
var html =<div>
</div>
return html;
}
});
})
React.render(<JsxDom ></JsxDom >,document.getElementById("XXX"));
5,State
状态机:A组件里有B组建 A组件的一个state改变 会重新渲染render函数 B组件也重新绘制
- state - 组件的状态变量 保存组件的当前状态,可以再任何时候通过this.state来获取到当前状态
- getInitialState() - 设置组件初始状态
- setState(currentState) - 设置组件当前状态 会重新渲染
6,this.props和this.state
this.props是指那些一旦定义了就不在修改的特性。this.state会随着用户的交互而随之产生变化。
7,表单
(1)文本输入框
不要使用value属性设置文本输入框元素的初值,应当使用defaultValue:
<input type="text" defaultValue="demo"/>
8,生命周期
组建的生命周期分成三种状态
。Mounting:已插入真实DOM
。Updating:正在被重新渲染
。Unmounting:已移除真实DOM
React 为每个状态都提供了两种处理函数,will函数在进入状态之前调用,did函数在进入状态之后调用,三种状态5种处理函数。
。componentWillMount() ------组件实例即将挂接(初次渲染)时被调用,这个方法在整个生命周期中只会被调用一次
。componentDidMount() -------组建实例挂接(初次渲染)后被调用,这个方法在整个生命周期中只会被调用一次
。componentWillUpdate(object nextProps, object nextState) ------组件实例即将重新渲染时被调用,这个方法在初次渲染时不会被调用。注意:不能再次方法内调用setState().
。componentDidUpdate(object prevProps, object prevState) -----组建实例重新渲染后被调用
。componentWillUnmount() ---- 组件实例即将从DOM树移除时被调用,这个方法在整个生命周期中只会被调用一次
此外 React还提供了2中特殊的状态处理函数
。componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用。参数object表示即将应用到组件实例上的新属性值。这个方法在初次渲染时不会被调用。在此方法内调用setState()不会引起重新渲染。
。shouldComponentUpdate(object nextProps, object nextState)组件判断是否重新渲染时调用
React 初学整理的更多相关文章
- React笔记整理
大概大半年时间都在用react写项目,一直在笔记上零零星星地记录着,在新的一年即将到来之际,打算整理整理发出来. 一.React是什么? React是Facebook开源的用于构建用户界面的javas ...
- react初学之render返回加括号的问题
刚在学习react的初始阶段,跑了一段代码 var Mydom = React.createClass({ render:function(){ return <div> <inp ...
- webpack react 错误整理
1.ERROR in ./src/entry.js Module build failed: SyntaxError 解决方法: 安装babel-preset-react, npm install ...
- React 初学
React.createClass({}); getInitialState,this.setState({}); {}解读代码块,外层不要加引号,比如onChange={this.handleCha ...
- react初学
react和vue一样都是mvvm的这种开发模式. 下载js文件 引入HTML文件里 <!DOCTYPE html> <html> <head> <scrip ...
- React初识整理(五)--Redux和Flux(解决状态传递问题)
Flux 1.引入:在React的应⽤中,状态管理是⼀个⾮常重要的⼯作.我们不会直接对DOM节点进⾏操作,⽽是通过将数据设置给state,由state来同步UI,这种⽅式有个潜在的问题,每个组件都有独 ...
- React初识整理(四)--React Router(路由)
官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...
- React初识整理(二)--生命周期的方法
React生命周期主要有7中: 1. componentWillMount() :组件将要挂载时触发 ,只调用1次 2. componentDidMount() :组件挂载完成时触发,只调用1次 3. ...
- React初识整理(一)
一.React的特点 1.自动化的UI状态管理:自动完成数据变化与界面效果的更新. 2.虚拟DOM:创建1个虚拟的dom节点树,放在内存里(内存修改数据效率高),数据变化时先修改内存里的虚拟DOM,然 ...
随机推荐
- Eclipse启动分析
最近研究了一下Eclipse的启动过程,查了点资料,也有点收获.下面是搜集到的一个比较好的说明,共享下... 在Eclipse启动过程中,Eclipse.exe负责启动,也就是把startup.jar ...
- java-Filter
java-Filter 过滤器是小型的Web组件,它们负责拦截请求以及响应,以便查看.提取或以某种方式操作正在客户机和服务器之间交换的数据.简单的说,过滤器就类似于客户端发送的web请求与服务器之间的 ...
- IBM powerVM VIOS
引言 随着信息化技术不断发展,各个企业 IT 基础架构也在不断朝向虚拟化,大数据,云计算等精简,整合的趋势发展.虚拟化技术就显得尤为重要.今天要给大家介绍的是 Power 服务器虚拟化技术中的一小部分 ...
- java基本加密算法
简单的java加密算法有: BASE64 严格地说,属于编码格式,而非加密算法 MD5(Message Digest algorithm 5,信息摘要算法) SHA(Secure Hash Algor ...
- JavaWeb学习系列——第一个JavaWeb程序
创建JavaWeb项目 Eclipse中新建一个Dynamic Web Project 指定项目名称.依赖环境 勾选生成web.xml选项 更改项目编译输出目录,项目右键 ->propertie ...
- ECMAScript 6中的数组操作方法
本文介绍ECMAScript 6即将带给我们新的数组操作方法,以及在怎样在现有浏览器应用这些新的数组特性. Note: 我将使用交替使用构造器(constructor)和类(class)两个术语. 类 ...
- CentOS下安装JDK7 转载
转载地址:http://www.cnblogs.com/rilley/archive/2012/02/02/2335395.html CentOS下安装JDK7 下载地址:http://www.ora ...
- 50款免费名片设计模板 PSD 源文件下载《上篇》
名片它可能是给你的客户留下正面的印象第一步,另一方面,名片是一个企业最重要和最符合成本效益的营销工具之一,尤其是对于刚刚起步的企业.这里收集了50款免费的名片设计模板,提供 PSD 源文件下载. 您可 ...
- 使用aspose.cell动态导出多表头 EXCEL
效果图: 前台调用: using System; using System.Collections.Generic; using System.Linq; using System.Web; usin ...
- The Linux Process Principle,NameSpace, PID、TID、PGID、PPID、SID、TID、TTY
目录 . 引言 . Linux进程 . Linux命名空间 . Linux进程的相关标识 . 进程标识编程示例 . 进程标志在Linux内核中的存储和表现形式 . 后记 0. 引言 在进行Linux主 ...