React 笔记一：简单串讲

github源码在此，记得点星:
https://github.com/brandonxiang/example-react

• React 笔记一：简单串讲
• Redux 笔记一：简单串讲

介绍

可以说React是非常装逼的前端工具，学习成本也相对较高。因为它和es6和webpack都相互结合的很好。所以在学react之前要学习babel和webpack等等，学了react之后又要学redux，react-router，还有很多周边的组件。

组件生态

知乎上很多人讨论react，angular和vue的问题。

我个人认为选择react的原因一定是它的组件生态，详情参考awesome-react-components。相比之下，angular的生态其实也不错，但是angular2的断裂式升级，以及angular1的脏类型的问题，还有angular2的功能完善。这些都让我很难喜欢angular。vue比较适合“单打独斗”的小项目。

入门教程

React 入门实例教程讲解了render的思想，JSX的语法，组件的构成，props和state等等。

数据绑定

state 和 props，两个专有的说法。props更多是属性的单项绑定，也可以是子组件的参数。而state是状态机，可以实现双向绑定，数据交互。

例子

创建一个简单React的demo，方法有很多，这里说一个简单脚手架create-react-app。

npm install -g create-react-app
create-react-app my-app

另外，就是采用yo模板构建工具generator-react-webpack。一口气完成react，webpack以及postcss模板生成。并且生成了单元测试代码

阮一峰老师的 代码示例库 脚手架

两种写法

参考React Native 中 ES6+ 和 ES5 语法比较

es5 方法写法

这种写法相对传统，有点es5的意思。初始化使用方法getInitialState。

var Hello = React.createClass({
   render() {
    return <h1>Hello, world</h1>;
  }
})

export default Hello

es6类写法

用es6的写法，新颖而亲切。初始化使用方法constructor。

export default class Hello extends Component{
  render() {
    return <h1>Hello, world</h1>;
  }
}

两者之间的区别详情参考React.createClass versus extends React.Component。

PropType

• React组件属性部类（propTypes）校验
• Reactjs 的 PropTypes 使用方法

生命周期

我个人感觉这是一个难点，渲染周期的方法，重写该方法可以实现在dom周期中的一些功能，紧密把握着dom的一些功能实现，有点像jquery的感觉。对生命周期的把握，可以实现很多逻辑的功能。

• componentWillUnmount()
  插入真实 DOM之前
• componentDidMount()
  完成插入真实 DOM
• componentWillUpdate()
  更新真实 DOM之前
• componentDidUpdate()
  完成更新真实 DOM
• componentWillUnmount()
  移除真实DOM之前
• componentWillReceiveProps()
  插入DOM后的Props被更新
• shouldComponentUpdate()
  当新的props和state接受后dom渲染之前，不会再初次渲染和forceUpdate()使用的时候

入门坑

• How I Fixed: Warning: React.createElement: type should not be null, undefined, boolean, or number.

• Module not found: Error: Cannot resolve module 'react/lib/ReactMount' in

参考

• React 技术栈系列教程
• learning-react
• react es6 怎么设置默认的props 于 state
• React组件之间传值

转载，请表明出处。总目录前端经验收集器