学习文档(按优先级排列)
http://reactjs.cn/react/docs/tutorial-zh-CN.html
http://www.cnblogs.com/Mrs-cc/p/4969755.html (es5与es6的兼容性写法)

React.createClass()

我们在一个 JavaScript 对象中传递一些方法到 React.createClass() 来创建一个新的React组件。这些方法中最重要的是 render,该方法返回一颗 React 组件树,并不是实际的HTML,这棵组件树最终将会渲染成 HTML。

ReactDOM.render()

ReactDOM.render() 实例化根组件,启动框架,注入标记到原始的 DOM 元素中,作为第二个参数提供。
ReactDOM 模块暴露了 DOM 相关的方法, 而 React 保有被不同平台的 React 共享的核心工具 (例如 React Native)。

this.props

在 JSX 中,通过将 JavaScript 表达式放在大括号中(作为属性或者子节点),你可以把文本或者 React 组件放置到树中。我们以 this.props 的 keys 访问传递给组件的命名属性,以 this.props.children 访问任何嵌套的元素。
props 是不可变的:它们从父级传来并被父级“拥有”。

this.props.data.map()

var names = ['Alice', 'Emily', 'Kate'];
names.map(function (name) {
return <div>Hello, {name}!</div>
})

this.state

为了实现交互,我们给组件引进了可变的 state。state 仅仅是为互动性,也就是随时间变化的数据所预留的。this.state 是组件私有的,可以通过调用 this.setState() 改变它。每当state更新,组件就重新渲染自己。

getInitialState()

getInitialState() 在生命周期里只执行一次,并设置组件的初始状态。

//es5
getInitialState: function(){
return {liked: false};
}
//es6
constructor(props){
super(props);
this.state = {liked: false};
}

this.setState()

设置组件内部state的值。动态更新的关键是对this.setState()的调用。

componentDidMount()

componentDidMount()是一个当组件被渲染时被React自动调用的方法。

React基础知识的更多相关文章

  1. React基础知识备忘

    section-1 //react组件 export class Halo extends React.Component{ constructor(...args){ super(...args); ...

  2. React 基础知识总结

    data-id="1190000016885142" data-license=""> 一.Node.js Node.js并不是一个JavaScript框 ...

  3. React开发实时聊天招聘工具 -第三章 React基础知识回顾

    function a (props) { return <h1>hello world{this.props.asd}</h1> } class a extends React ...

  4. React入门---基础知识-大纲-1

    -----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...

  5. 【温故知新】—— React/Redux/React-router4基础知识&独立团Demo

    前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...

  6. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  7. React:快速上手(1)——基础知识

    React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...

  8. 学习React之前你需要知道的的JavaScript基础知识

    在我的研讨会期间,更多的材料是关于JavaScript而不是React.其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内 ...

  9. React学习笔记(一) 基础知识

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...

随机推荐

  1. Xdebug文档(二)变量显示特性

    Xdebug能替代PHP的var_dump()函数来显示变量值.xdebug的版本包含对不同数据类型作数组元素/对象属性.最大深度和字符串长度以不同颜色标识.这里也有一些功能能很好地处理变量显示. 相 ...

  2. MyBatis的getMapper()接口、resultMap标签、Alias别名、 尽量提取sql列、动态操作

    一.getMapper()接口 解析:getMapper()接口 IDept.class定义一个接口, 挂载一个没有实现的方法,特殊之处,借楼任何方法,必须和小配置中id属性是一致的 通过代理:生成接 ...

  3. jQuery Validation Engine 表单验证

    功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, ...

  4. AMD and CMD are dead之KMDjs在JS工程化的努力

    总览 kmdjs发布了最接近最终版本的0.0.4版本https://github.com/kmdjs/kmdjs,你已经完全可以在项目中使用.我已经无法用语言形容其完美程度.借用我发的微博:   模块 ...

  5. jquery实现表格的搜索功能

    版权声明:作者原创,转载请注明出处! HTML代码如下: <input type="text" id="txt" value="" / ...

  6. android 双缓存机制

    废话不多说,直接贴代码! 所谓的双缓存,第一就是缓存在内存里面,第二就是缓存在SD卡里面,当你需要加载数据时,先去内存缓存中查找,如果没有再去SD卡中查找,并且用户可以自选使用哪种缓存! 缓存内存和缓 ...

  7. 在UTF-8中,一个汉字为什么需要三个字节?

    UNICODE是万能编码,包含了所有符号的编码,它规定了所有符号在计算机底层的二进制的表示顺序.有关Unicode为什么会出现就不叙述了,Unicode是针对所有计算机的使用者定义一套统一的编码规范, ...

  8. asp.net signalR 专题—— 第四篇 模拟RPC模式的Hub操作

    在之前的文章中,我们使用的都是持久连接,但是使用持久连接的话,这种模拟socket的形式使用起来还是很不方便的,比如只有一个唯一的 OnReceived方法来处理业务逻辑,如下图: protected ...

  9. .NET项目开发—浅谈面向对象的纵横向关系、多态入口,单元测试(项目小结)

    阅读目录: 1.开篇介绍 2.使用委托消除函数串联调用 2.1.使用委托工厂转换两个独立层面的对象 3.多态入口(面向对象继承体系是可被扩展的) 4.多态的受保护方法的单元测试(Protected成员 ...

  10. mysql权限与安全

    一.MySQL权限系统通过两个阶段进行认证: (A) 对用户进行身份认证,IP地址和用户名联合, (B) 对合法用户赋予相应权限,权限表在数据库启动的时候载入内存中. 二.在权限的存取过程中,会用到& ...