React基础知识
学习文档(按优先级排列)
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基础知识的更多相关文章
- React基础知识备忘
section-1 //react组件 export class Halo extends React.Component{ constructor(...args){ super(...args); ...
- React 基础知识总结
data-id="1190000016885142" data-license=""> 一.Node.js Node.js并不是一个JavaScript框 ...
- React开发实时聊天招聘工具 -第三章 React基础知识回顾
function a (props) { return <h1>hello world{this.props.asd}</h1> } class a extends React ...
- React入门---基础知识-大纲-1
-----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...
- 【温故知新】—— React/Redux/React-router4基础知识&独立团Demo
前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- React:快速上手(1)——基础知识
React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...
- 学习React之前你需要知道的的JavaScript基础知识
在我的研讨会期间,更多的材料是关于JavaScript而不是React.其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内 ...
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
随机推荐
- WindowsAPI调用和OCR图片识别
傻了吧唧的装双系统.成功的干崩了原本的系统.现在重装VS.闲的没事胡扯几句. WindowsAPI在每一台Windows系统上开放标准API供开发人员调用.功能齐全.在这里只介绍三个部分. 1.利用A ...
- jQuery uploadify 文件上传
uploadify这个插件是基于js里面的jquery库写的.结合了ajax和flash,实现了这个多线程上传的功能.现在最新版为3.2.1. 在线实例 实例预览 Uploadify 在线实例Demo ...
- jquery和css3实现滑动导航菜单
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q144-Q146)
Question 144 You are planning a feature upgrade for a SharePoint 2010 farm. The original feature wi ...
- android TextView多行文本(超过3行)使用ellipsize="end"属性无效问题的解决方法
<TextView android:id="@+id/desc" android:layout_width="match_parent" android: ...
- Google C++单元测试框架GoogleTest---AdvancedGuide(译文)上
本文是gtest高级测试指南的译文,由于文章太长,分上下两部分. 一.简介 本文档将向您展示更多的断言,以及如何构造复杂的失败消息,传播致命的故障,重用和加速您的测试夹具,并在您的测试使用各种标志. ...
- OC 类别与扩展(匿名类别)
OC 类别与扩展(匿名类别) 类别(Categroy): 又称为扩展类,在类的原基础上扩展方法,且不可添加变量,如果扩展的方法与原始类中的方法相同,则会隐藏原始方法,且不可在扩展方法中通过super调 ...
- 压缩Sqlite数据文件大小,解决数据删除后占用空间不变的问题
最近有一网站使用Sqlite数据库作为数据临时性的缓存,对多片区进行划分 Sqlite数据库文件,每天大概新增近1万的数据量,起初效率有明显的提高,但历经一个多月后数据库文件从几K也上升到了近160M ...
- DMZ区
DMZ是英文“Demilitarized Zone”的缩写,它是为了解决安装防火墙后外部网络不能访问内部网络服务器的问题,而设立的一个非安全系统与安全系统之间的缓冲区,这个缓冲区位于企业内部网络和外部 ...
- jackson官方快速入门文档
官方地址: http://jackson.codehaus.org/ http://wiki.fasterxml.com/JacksonInFiveMinutes http://wiki.faster ...