写在前面
React入门学习笔记。
教程可参考：
React 教程 | 菜鸟教程
阮一峰的网络日志 > React 入门实例教程
自己用React写了一个to-do-list的小demo：
react-todolist
欢迎评论指出问题，一起学习。
01 React简介
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
02 React特点
-
声明式设计 −React采用声明范式，可以轻松描述应用。
-
高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
-
灵活 −React可以与已知的库或框架很好地配合。
-
JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
-
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
-
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
03 React安装与使用
实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：
-
react.min.js - React 的核心库
-
react-dom.min.js - 提供与 DOM 相关的功能
-
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
也可以用npm来安装并创建项目：
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
04 React JSX
简介
React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
使用JSX
JSX 看起来类似 HTML ，我们可以看下实例:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。
JSX可以放在一个独立文件中，在HTML文件中引入JSX时需要将type="text/babel"。
在JSX中使用javascript表达式
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
document.getElementById('example')
);
不能使用if语句，可以用三元表达式代替。
React内联样式
React推荐使用内联样式，使用驼峰写法，自动补全px。
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>菜鸟教程</h1>,
document.getElementById('example')
);
其他
标签内部的注释需要花括号。
允许在模板中插入数组。
React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
05 React组件
注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World！</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
如果我们需要向组件传递参数，可以使用 this.props 对象。
注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
06 React State
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
以下实例中创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
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 ? '喜欢' : '不喜欢';
return (
<p onClick={this.handleClick}>
你<b>{text}</b>我。点我切换状态。
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
07 React Props
state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
可以通过 getDefaultProps() 方法为 props 设置默认值。
Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
08 React组件API
- 设置状态：setState
- 替换状态：replaceState
- 设置属性：setProps
- 替换属性：replaceProps
- 强制更新：forceUpdate
- 获取DOM节点：findDOMNode
- 判断组件挂载状态：isMounted
replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。
props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。
replaceProps()方法与setProps类似，但它会删除原有。
forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()，一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。
isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。
09 React 组件生命周期
组件的生命周期可分成三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
生命周期的方法有：
- componentWillMount 在渲染前调用，在客户端也在服务端。
- componentDidMount 在第一次渲染后调用，只在客户端。
- componentWillReceiveProps 在组件接收到一个新的prop时被调用。
- shouldComponentUpdate 在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
- componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。
- componentDidUpdate 在组件完成更新后立即调用。
- componentWillUnmount 在组件从 DOM 中移除的时候立刻被调用。
componentDidMount: function () {}；
10 AJAX
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
11 表单与事件
当你需要从父组件中更新子组件的 state 时，你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。
当你需要从子组件中更新父组件的 state 时，你需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上。
12 React Refs
React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。
这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。
网友评论