学习react之React 入门（阮一峰教程笔记）
一 react.js react-dom.js Brower.js
- react.js 核心库
- react-dom.js提供dom方法
- Brower.js JSX语法--->JS语法
服务器
$ babel src --out-dir build //src内的js文件全部转换 放入build文件夹
二 ReactDOM.render()
ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example')
);三 JSX语法
- 支持js和html混写
var names = ['Alice', 'Emily', 'Kate'];ReactDOM.render(<div>{names.map(function (name) {return <div>Hello, {name}!</div>})}</div>,document.getElementById('example')
);2.< 与 {
JSX 与 数组
var arr = [<h1>Hello world!</h1>,<h2>React is awesome</h2>,
];
ReactDOM.render(<div>{arr}</div>,document.getElementById('example')
);# 四 组件
```javascipt
var HelloMessage = React.createClass({render: function() {return <h1>Hello {this.props.name}</h1>;}
});ReactDOM.render(<HelloMessage name="John" />,document.getElementById('example')
);解释：
- 通过 React.createClass()方法构造组件类 HelloMessage,HelloMessage 是个类所以规范和类一样。组件类的第一个字母必须大写，否则会报错。
- 模版插入 <HelloMessage name="John" /> 的时候，就是在生成一个HelloMessage类的实例。
- 所有组件类必须拥有一个自己的render方法 用于输出组件。
- 组件类只能包含一个顶层标签
- 同原生HTML一样，组件可以加入自定义属性，如例子中的 name="John"，然后通过组件类的this.props属性获取。
- 由于原生js的保留字，class属性要写成className for属性要写成htmlFor
五 this.props.children属性
this.props的属性和组件的属性基本是一一对应的，但是有一个例外就是this.props.children属性。它是在遍历组件的子节点
var NodeList = React.createClass({render: function() {return <ul>React.Children.map(this.props.children,(child)=>{return <li>{child}</li> //记住要return啊兄dei
})</ul>;}
});ReactDOM.render(<NodeList><span>john</span><span>sam</span></NodeList>document.getElementById('example')
);解释：
- this.props.children的值有三种可能 ：一个孩子节点：对象；多个孩子节点：数组；没有孩子节点：undefined
- React.Children是一个React提供的工具函数，用来处理this.props.children 而不用太关心子节点的类型(这个map方法的用法需要理解记一下)
- React.Children还有一些别的方法 ，官方手册
六 PropType
- 组件的属性可以接受字符串，数字，函数等任意类型，然而有时候我们想要规定组件能接受的类型，需要验证别人使用组件时的参数是否符合要求。
var MyTitle = React.createClass({propTypes: {title: React.PropTypes.string.isRequired //要求类型时string},render: function() {return <h1> {this.props.title} </h1>;}
});var data = 123;ReactDOM.render(<MyTitle title={data} /> //由于data是个数字不是要求的string类型 所以控制台会报错document.body留下PropType的官方文档
- 可以通过getDefaultProps设置默认属性
var MyTitle = React.createClass({getDefaultProps : function () {return {title : 'Hello World'};},render: function() {return <h1> {this.props.title} </h1>;}
});ReactDOM.render(<MyTitle />,document.body
);七 获取真实的DOM节点
diff算法：
组件并不是真实的DOM节点，而是存在与内存中的一种数据结构，叫做虚拟DOM，只有当它真正插入文档中的时候才会真的变成DOM。
React的设计时所有的DOM变动都现在虚拟的DOM上发生，然后再将实际变动的部分反映在真实的DOM上。这就是DOM diff 算法，它可以大大提升网页的性能表现。如果想要拿到真实DOM，就要使用ref属性
var MyComponent = React.createClass({handleClick: function() {this.refs.myTextInput.focus();},render: function() {return (<div><input type="text" ref="myTextInput" /><input type="button" value="Focus the text input" onClick={this.handleClick} /></div>);}
});ReactDOM.render(<MyComponent />,document.getElementById('example')
);
- 由于虚拟DOM是不能拿到用户的输入，所以如果要拿到输入，文本框必须要有一个ref属性(上例中:ref="myTextInput")，然后this.refs.[refName]就会返回真实的节点(上例子中:this.refs.myTextInput)
- 注意：由于this.refs.[refName]获取的是真实的DOM，所以一定要等到虚拟DOM插入文档之后才能使用这个属性，否则会报错，上例中通过为组件制定Click事件的回调函数，使得只有在真正的DOM被click（意味着虚拟DOM已经转换成了真实的DOM）之后，才读取this.refs.[refName]获得真实的DOM
this.state
将组件看成一个状态机，有一个初始状态，然后随着用户的交互状态发生改变而重新渲染UI。
var LikeButton = React.createClass({getInitialState: function() {return {liked: false};},handleClick: function(event) {this.setState({liked: !this.state.liked});},render: function() {var text = this.state.liked ? 'like' : 'haven\'t liked';return (<p onClick={this.handleClick}>You {text} this. Click to toggle.</p>);}
});ReactDOM.render(<LikeButton />,document.getElementById('example')
);- LikeButton组件类的getInitialState方法（这个方法是自带的）设置一个状态的初始值，就是一个对象(本例中{like:false})，这个对象可以通过this.state读取。render渲染出组件。用户点击导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
十 组件的生命周期
组件生命周期有三种：
- Mounting: 已插入真实的DOM
- Updating: 正在被重新渲染
- Unmounting: 已移除真实DOM每个状态都配有Will 和 Did相应的处理函数
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
两个特殊状态的处理函数
- componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
- shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
参考文档
- 例子
var Hello = React.createClass({getInitialState: function () {return {opacity: 1.0};},componentDidMount: function () {this.timer = setInterval(function () {var opacity = this.state.opacity;opacity -= .05;if (opacity < 0.1) {opacity = 1.0;}this.setState({opacity: opacity});}.bind(this), 100);},render: function () {return (<div style={{opacity: this.state.opacity}}>Hello {this.props.name}</div>);}
});ReactDOM.render(<Hello name="world"/>,document.body
);
上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染
注意，内联样式
<div style={{opacity: this.state.opacity}}> //正确 外层大括号表示这是JS语法
<div style={opacity: this.state.opacity}> //错误
Ajax & Promise
采用Promise抓取github上面最高点赞的项目的例子是个很好的promise加React应用的例子。
var RepoList = React.createClass({getInitialState: function() {return { loading: true, error: null, data: null};},componentDidMount() {this.props.promise.then(value => this.setState({loading: false, data: value}),error => this.setState({loading: false, error: error}));},render: function() {if (this.state.loading) {return <span>Loading...</span>;}else if (this.state.error !== null) {return <span>Error: {this.state.error.message}</span>;}else {var repos = this.state.data.items;var repoList = repos.map(function (repo) {return (<li><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>);});return (<main><h1>Most Popular JavaScript Projects in Github</h1><ol>{repoList}</ol></main>);}}
});
学习react之React 入门（阮一峰教程笔记）相关推荐
- 学习es6中class——整合阮一峰教程、MDN
导语 class只是语法糖,并没有为js引入一种新的对象继承模式,之前通过原型链一样可以实现class的功能: //定义类 class Point { constructor(x, y) { this ...
- react 入门 阮一峰
http://www.ruanyifeng.com/blog/2015/03/react.html
- React 入门实例 参考阮一峰博客
React 入门实例 参考阮一峰博客 http://www.ruanyifeng.com/blog/2015/03/react.html React 可以在浏览器运行,也可以在服务器运行.服务器的用法 ...
- react 阮一峰_React 最简单的入门应用项目
学习一项工具,最快的方式就是边学便用.在学习 GUI 时我会边看API边写一个记事本,学习 web 框架时我会边学边写一个留言板. 学习和工作上一直是在写后端代码,有一点前端基础,但没有用过JS框架, ...
- 读阮一峰的React 入门实例教程有感
读阮一峰的React 入门实例教程有感 阮一峰的React入门实例教程其实我在一年前就读过,当时就想学习React,其实那个时候刚刚jQuery入门,啥也不懂,看得云里雾里,所以后来就没有继续研究下去 ...
- react入门（1）之阮一峰react教程
阮一峰老师的github地址:React Demos React 入门实例教程 1.HTML模板 <!DOCTYPE html> <html><head>// re ...
- react 阮一峰_【React】Hook 入门
其实大家直接看看阮一峰老师写的这篇文章就足够了,本人就是想把人家的内容再自己咀嚼一遍而已. React Hooks 入门教程www.ruanyifeng.com react 用过一段时间的人都知道, ...
- 阮一峰react入门笔记
1.造树.type=text/babel,逗号分离 2.jsx语法(遇到HTML标签(以 < 开头),就用HTML规则解析:遇到代码块(以 { 开头),就用JavaScript规则解析). 函 ...
- React 入门实例教程(原作者： 阮一峰)
转载(http://www.ruanyifeng.com/blog/2015/03/React.html) 现在最热门的前端框架,毫无疑问是 React . 上周,基于 react 的 React N ...
最新文章
- Jquery的html方法里包含特殊字符的处理，类似双引号之类的
- 使用CreateFile函数打开COM10及以上串行口
- c语言 typeof 结构体,Go语言通过反射获取结构体的成员类型
- 多重背包单调队列优化思路_动态规划入门——多重背包与单调优化
- matlab the installer cannot read,MATLAB安装 The installer cannot read the mwinstall.dll… | 学步园...
- C＃中谁最快：结构还是类？
- LeetCode 800. 相似 RGB 颜色
- python安装路径查看_查看python安装路径及pip安装的包列表及路径
- xampp for linux
- mac合上盖子不锁屏_macbook合上盖子不断网的设置
- [面试] C/C++ 语法（五） —— extern
- 用于编译cm-12.0 的 local_manifest.xml文件
- ArcGIS 赋予不同指标权重计算综合结果
- oracle的时间取的到底是谁的时间
- 2万字-Python 用 XGBoost 进行梯度提升的数据准备（建议收藏）
- 智能水表营收管理系统
- matlab中garchred是什么意思,garch模型matlab
- 天龙八部荣耀版体验服服务器未响应,《天龙八部荣耀版》体验服评测：用竖版画面重新诠释天龙江湖...
- UV-a1586-分子式
- 计算机硬件环境指啥,硬件环境指的是什么呢？