react入门一

简介

• react非完整MVC/MVVM框架，专注于提供清晰、简洁的view层解决方案，且包括view库和controller库。可根据应用场景搭配flux、redux、graphql/relay使用；
• virtual dom，react把真实dom对象转换为javascript对象树，每次更新对比上一次virtual dom，仅对发生变化的部分批量更新。且可使用生命周期函数减少不必要过程；
• 函数式编程；
• jsx语法，将html语法直接加入到js中，再通过编译器转换到纯js后由浏览器执行；

UI = render(data)
用户看到的界面，是一个纯函数执行的结果；

JSX语法

virtual dom分类

• DOM element
• component element

jsx基本语法

• 定义标签，最外层只允许被一个标签包裹；
• 标签必须闭合；
• 组件元素首字母大写，和dom元素区分；
• 注释 {/* */} ，可使用条件注释（不推荐）

  <!--[if IE]-->
   <p>XXX</p>
  <![endif]-->
  

• DOCTYPE；
• 元素属性为className，循环为htmlFor；
• 省略boolean属性为默认设置为true；
• 自定义html属性使用data-前缀；
• 展开属性，可使用{...data}；
• react会将要显示到dom的字符串转义，防止xss；

react组件

web components组件的标准

• 基本的封装性，实例化的方式制造对象；
• 简单的生命周期呈现；
• 明确的数据流动；

设计原则：

• 高内聚（high cohesion）：逻辑紧密相关的内容放置在一个组件内。react将js、css、html放置在一个文件中，天生具有高内聚的特点。
• 低耦合（low coupling）：不同组件之间的依赖关系要尽量弱化。

react组件的组成

• props，属性；
• state，状态；
• 生命周期方法；

React数据流

自顶向下单向数据流动；

• props：组件对外接口，自顶向下遍历整棵组件树，重新尝试渲染所有相关子组件；
• state：组件内部状态，只关心每个组件自己内部的状态；

state

根据如何控制数据可分为

• smart component，智能组件，在内部更新数据；
• dumb component，木偶组件，内外部更新数据；

使用this.state ={};设置，仅可为对象。

setState

使用this.setState({});更新；为异步方法；

props

props本身是不可改变的，当试图改变props的原始值时，react会报出类型错误的警告。组件的props一定来自于默认的属性或者通过副组件传递过来，需要改变props值时，最简单为使用局部变量或者接在jsx中计算。

当需要层层传递，或者需要同一管理数据时，可以将数据源放在React组件之外形成全局函数，即store概念。

不可改变props的值，会使得程序陷入混乱

• 可以为任意类型，但除字符串类型，其他类型需要使用花括号包住（因此对象会有两个花括号）；
• 传递函数，自组件调用后可以将内部信息传递给外部；
• 使用props需要在构造函数中调用super(props)，否则无法通过this.props访问父组件传递的值；

propsTypes

Counter.propTypes = {
	caption: PropsTypes.string.isRequired,
}

开发环境可用于尽早发现问题，但是不适用于生产环境，可以使用babel-react-optimoize优化代码；

defaultProps

给props添加默认值

Counter.defaultProps = {
	initVaule: 0;
}

React生命周期

Mount

1. constructor
   初始化state；
   绑定成员函数的this环境；
2. getInitialState/getDefaultProps（不推荐使用）
   初始化this.state和this.props，需要React.creatClass创建组件，ES6中无需用到；
   ES6中推荐在constructor中初始化state，使用VDOM.defaultProps初始化props；
3. componentWillMount
   render前调用，一把此处功能可放置到render中；
   服务端、浏览器端均被调用；
4. render
   不做实际渲染，只是返回一个JSX描述的结构，最终由react来操作渲染；
5. componentDidMount
   render后调用，非立即调用，发生在渲染后；
   仅浏览器端均被调用；
   可在此处使用非React方法创造一些DOM元素，但是卸载时需要清理；

Update

1. componentWillReceiveProps(nextProps)
   父组件的render函数被调用时，不管props是否更改均被调用；
   this.setState不会触发该函数调用；
   nextprops为本次渲染值，this.props为上一次渲染值；
2. shouldComponentUpdate(nextProps, nextState)
   决定一个组件什么时候需要更新，必须返回一个布尔值，默认返回true；
3. componentWillUpdate/componentDidUpdate
   当需要更新组件时，依次调用componentWillUpdate、render、componentDidUpdate；

Unmount

1. componentWillUnmount
   卸载前调用，可用于清理componentDidMount中创建的dom元素；