表单相关

固定的几个属性和事件

  • value: <input>,<textarea>;
  • checked: <input> typeof checkbox, radio;
  • selected: <option>;
  • onChange: 作用于上面元素;

默认值

 render: function() {
return <input type="text" defaultValue="Hello!" />;
}

获取事件触发

handleChange: function(event) {
this.setState({value: event.target.value.substr(0, 140)});
}

select定义默认值

//使用selected
<option value="A" selected={true}>Apple</option> //利用state
var Select = React.createClass({
getInitialState: function() {
return {
value: 'B'
}
},
change: function(event){
this.setState({value: event.target.value});
},
render: function() {
return (
<select onChange={this.change} value={this.state.value} >
<option value="A" >Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
);
}
});

设置select多选

<select multiple={true} value={['B', 'C']}>
</select>

组件的生命周期

三个状态

Mounting:已插入真实DOM;

  • componentWillMount(): -React.render

    • render方法执行之前,此时不能获取dom节点;
  • getInitialState();-React.render
  • render:-React.render
    • 组件初始化渲染和this.setState({}), this.render(), React.render时会调用;
    • 在修改dom节点的时候也不会调用;
    • 注意在执行this.setState()时才会重新渲染;
  • componentDidMount();-React.render

Updating:正在被重新渲染;

  • componentWillReceiveProps(object nextProps):-this.setProps
  • shouldComponentUpdate(object nextProps, object nextState):-this.setProps, this.setState
    • 组件判断是否重新渲染时调用;
    • 如果有定义,必须返回布尔值以判断时候继续调用update方法;
  • componentWillUpdate(object nextProps, object nextState):-(this.setProps, this.setState && should !== false) || this. forceUpdate
  • componentDidUpdate(object prevProps, object prevState):-(this.setProps, this.setState && should !== false) || this. forceUpdate

Unmounting:已移出真实DOM;

  • componentWillUnmount();-React.unmountComponentAtNode
//移除其他组件
mount: function () {
React.render(<Input />, document.getElementById('app'));
},
unmout: function () {
React.unmountComponentAtNode(document.getElementById('app'));
}
//移除自身
remove: function () {
React.unmountComponentAtNode(React.findDOMNode(this).parentNode);
}

强制重新渲染: this.forceUpdate()

混合

  • 使用Mixins;
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
}
}; var TickTock = React.createClass({
mixins: [SetIntervalMixin],
.......
}
  • 在使用es6时,不支持mixins;

Contexts

react-基础(2)的更多相关文章

  1. react基础(1)

    在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...

  2. react基础(2)

    react基础(1):介绍了如何创建项目,总结了JSX.组件.样式.事件.state.props.refs.map循环,另外还讲了mock数据和ajax 还是用 react基础1 里创建的项目继续写案 ...

  3. react基础语法(五) state和props区别和使用

    props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  4. react基础用法二(组件渲染)

    react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 />  ...

  5. react基础用法一(在标签中渲染元素)

    react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...

  6. AntDesign(React)学习-3 React基础

    前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...

  7. React 基础入门,基础知识介绍

    React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...

  8. React基础语法学习

    React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...

  9. React 基础入门

    React 起源于 Facebook 内部项目,是一个用来构建用户界面的 Javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组 ...

  10. react基础

    上一篇文章主要是记录了自己是如何创建react项目的,今天则主要是总结一下react中的一个基础入门知识,包括数据定义和绑定.属性绑定.数组循环等等. 组件继承和挂载 当我们使用脚手架或者命令行创建一 ...

随机推荐

  1. HTML 基础

    1.HTML  超文本标记语言 2.网页分类: 动态网页   静态网页 ①静态网页与动态网页区别:  主要:动态网页与数据库链接,静态网页不与数据库连接: ②静态网页 修改展示图片 必须修改源代码 : ...

  2. 最喜欢的VS 键盘快捷键摘抄

    最喜欢的Visual Studio键盘快捷键(关闭)   336年最喜欢的 425年 你最喜欢的Visual Studio键盘快捷键是什么? 我总是让我的手在键盘上,远离鼠标! 一个请每回答. net ...

  3. HDU 5821 Ball (贪心排序) -2016杭电多校联合第8场

    题目:传送门. 题意:T组数据,每组给定一个n一个m,在给定两个长度为n的数组a和b,再给定m次操作,每次给定l和r,每次可以把[l,r]的数进行任意调换位置,问能否在转换后使得a数组变成b数组. 题 ...

  4. HTML 表格垂直对齐方式

    HTML表格标记教程(25):行的垂直对齐属性VALIGN在垂直方向上,可以设定行的对齐方式,分别有居上.居中.居下3种.基本语法<TR VALIGN="TOP">&l ...

  5. ios 多线程小结----- GCD篇

    //3 GCD(充分利用设备的多盒)-------------屏蔽了线程,只能看见任务 队列步骤两步,定制任务,将任务添加到队列.GCD将添加的任务,放到线程中去执行,自动执行,自动释放原则:先进先出 ...

  6. iOS真机调试

    备注:本阶段之前的修改配置文件.准备脚本等,只需要做一次.但本阶段的操作,对每个需要真机调试的工程都要做一遍. ① 禁用Xcode自动的签名操作 将工程配置“Build Settings”中所有的Co ...

  7. [插件]jQuery multiselect初始化及默认值修改

    下载地址:http://pan.baidu.com/s/1dE2daSD 1.Jquery多选下拉列表插件jquery multiselect功能介绍及使用 http://www.jb51.net/a ...

  8. 玩转SSRS第九篇---匿名访问的一个间接方法

    SSRS是一个功能丰富的报表平台,我们可以在这个平台上实现各种不同需求的报表应用,所以这个平台也吸引了很多.net框架之外的技术,希望能在应用中引入SSRS的报表,比如JSP或者PHP页面,这个时候系 ...

  9. jQuery实现无限加载瀑布流特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 通过Small Basic把儿子/女儿带入编程的世界

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:今天是儿子3岁的生日,就来介绍一下适合给儿童培养兴趣的编程语言--微软Small Ba ...