一、react简介
1、专注视图层View，react并不是完整的MVC/MVVM框架，但可根据应用场景自行选择业务层框架，并根据需要搭配Flux、Redux、GraphQL/Relay来使用。 近几年，前端解决方案也经历了 redux => dva => umi 的发展。
2、Virtual DOM提升性能，每次数据更新后，重新计算Virtual DOM，和上一次生成的做对比，对发生变化的部分做批量更新。shouldComponentUpdate生命周期回调减少数据变化后不必要的Virtual DOM对比过程，因为对比DOM节点也是需要资源的，后面的文章里再介绍diff算法。
3、函数式编程与JSX语法是react的特点，可用其构建可复用的react组件。
二、react组件
1、react组件由三部分组成：属性（props）、状态（state）、生命周期方法。如下图所示
react组件的组成
react组件可接收参数，也可能有自身的状态，一旦其有所改变，react组件便执行相应的生命周期方法，最后渲染。
2、react组件构建方法：三种构建方法，React.createClass（不推荐）、ES6 classes和无状态函数（stateless function）
React.createClass（不推荐）
用 React.createClass 构建组件是 React 最传统、也是兼容性最好的方法。在 0.14 版本发布之前，这一直都是 React 官方唯一指定的组件写法。示例代码如下：
const Button = React.createClass({
getDefaultProps() {
return { color: 'blue', text: 'Confirm', };
},
render() {
const { color, text } = this.props;
return (
<button className={`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
});
从表象上看，React.createClass 方法就是构建一个组件对象。当另一个组件需要调用 Button 组件时，只用写成 <Button />，就可以被解析成 React.createElement(Button) 方法来创建 Button 实例，这意味着在一个应用中调用几次 Button，就会创建几次 Button 实例。
ES6 classes
ES6 classes 的写法是通过 ES6 标准的类语法的方式来构建方法：
import React, { Component } from 'react';
class Button extends Component {
constructor(props) {
super(props);
}
static defaultProps = {
color: 'blue',
text: 'Confirm',
};
render() {
const { color, text } = this.props;
return (
<button className={`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
}
这里的直观感受是从调用内部方法变成了用类来实现。与 createClass 的结果相同的是，调用类实现的组件会创建实例对象。
无状态函数
使用无状态函数构建的组件称为无状态组件，这种构建方式是 0.14 版本之后新增的，且官方颇为推崇。示例代码如下：
function Button({ color = 'blue', text = 'Confirm' }) {
return (
<button className={`btn btn-${color}`}>
<em>{text}</em>
</button>
);
}
无状态组件只传入 props 和 context 两个参数；也就是说，它不存在 state，也没有生命周期方法，组件本身即上面两种 React 组件构建方法中的 render 方法。不过，像 propTypes 和 defaultProps 还是可以通过向方法设置静态属性来实现的。
在适合的情况下，我们都应该且必须使用无状态组件。无状态组件不像上述两种方法在调用时会创建新实例，它创建时始终保持了一个实例，避免了不必要的检查和内存分配，做到了内部优化。
三、react数据流
1、state内部状态，可用setState方法改变状态值，此方法是异步方法。
2、props组件传值，自顶向下单向传递
3、用 function prop 与父组件通信
handleClick(item) {
// ...
this.props.onChange({item});
}
下一篇我们来学习下react生命周期
网友评论