深入react技术栈学习——（一）初入react世界

react简介

react并不是完整的mvc/mvvm框架，它专注于提供清晰、简洁的View（视图）层解决方案。而由与模板引擎不同，react不仅专注于解决View层的问题，又是一个包括View和Controller的库。

虚拟DOM

真实页面对应一个DOM树，在传统页面中每次更新页面，都要手动操作dom进行更新。但是dom操作非常昂贵，前端开发中，性能消耗最大的就是dom操作。react把真实dom树转换成js对象树，也就是虚拟dom。

每次数据更新后，重新计算虚拟dom，并和上次生成的虚拟dom对比，对发生变化的部分做批量更新。

JSX语法

react为了方便View层组件化，承载了构建HTML结构化的职责。react通过创建与更新虚拟元素来管理整个虚拟dom，其中虚拟dom可以理解为真实元素的对应，它的构建与更新都是在内存中完成的，并不会渲染到dom中去。在react中创建的虚拟元素可以分为两类，dom元素和组件元素，分别对应着原生dom元素与自定义元素，而jsx与创建元素的过程有着莫大的关联。

1. dom元素
   web页面是由一个个html元素嵌套组合而成的。当使用js来描述这些元素是，可以被简单地表示为纯粹的json对象。如：
   
   react中到处都是可以复用的元素，这些元素不是真实的实例，它只是react告诉开发者想要在屏幕上显示什么。我们无法通过方法调用这些元素，它们只是不可变的描述对象。

2. 组件元素
   封装上诉的button元素，可以得到一种构建按钮的公共方法：
   
   当要生成dom元素中具体的按钮时，就可以调用Button({color:"blue",text:"confirm"})来创建。
   在这过程中，Button方法其实可以作为元素而存在，方法名对应了dom元素类型，参数对应了dom元素的属性，那么它就具备了元素的两大必要条件，这样构建的元素就是自定义类型的元素，或称为组件元素。
   这就是react的核心思想之一。因为有公共的表达方法，我们可以让元素们彼此嵌套或混合。这些层层封装的组件元素，就是所谓的react组件，最终可以用递归渲染的方式构建出完全的dom元素树。
   jsx将html语法直接加入到js代码中，再通过翻译器转换到纯js后由浏览器执行。实际开发中，jsx在产品打包阶段都已编译成纯js，不会带来任何副作用。
    

JSX语法

jsx的官方定义是类XML语法的es扩展。jsx基本语法基本被XML囊括了，但也有少许不同之处。

1. xml基本语法
   使用类XML语法的好处是标签可以任意嵌套，我们可以像html一样清晰看到dom树结构及其属性。需要注意以下几点：
     (1).定义标签是，只允许被一个标签包裹。
     (2).标签一定要闭合
2. 元素类型
   在jsx里自然会有对用，对应规则是html标签首字母是否为小写字母，其中小写字母对应dom元素，而组件元素自然对应大写首字母。
3. 元素属性
   元素除了标签之外，另一个组成部分就是标签的属性。jsx中，不论dom元素还是组件元素，都有属性。不同的是dom元素属性是标准规范属性，但又两个例外——class和for，因为这两个单词在js中是关键字。因class等同于className，for等同于htmlFor。组件元素的属性是完全自定义的属性，也可以理解玩实现组件所需要的参数。
   在JSX中往dom元素中传入自定义属性，要使用data-前缀，然而在自定义的组件标签中，任意的属性都是被支持的。
4. html转义
   react会将所有要显示到dom的字符串定义，防止XSS。所以，如果JSX中含有转义后的实体字符，如©（©），则最后dom中不会正确显示，因为react会自动把©中的特殊字符转移了。解决方法：
   （1）.直接使用UTF-8字符©；
   （2）.使用对应字符的Unicode编码查询编码
   （3）.使用数组封装组件<div>{["cc",<span>&copy</span>,"2018"]}</div>
   （4）.直接插入原始html
   此外，react提供了dangerouslySetInnerHTML属性。

react数据流

react中，数据是自顶向下单向流动的，即从父组件到子组件。这条原则让组件之间的关系变得简单且可预测。

state和props是react组件中最重要的概念。如果顶层组件初始化props，那么react会向下遍历整棵组件树，重新尝试渲染所有相关子组件。state只关心每个组件自己内部状态，这些状态只能在组件内改变。把组件看成一个函数，那么它接受props作为参数，内部由state作为函数的内部参数，返回一个虚拟dom的实现。

• state
  当组件内部使用库内置的setstate方法时，最大的表现行为就是该组件会尝试重新渲染。在react中常常在事件处理方法中更新state，setstate是一个异步方法，一个生命周期内所有的setstate方法会合并操作。
• props
  props是react用来让组件之间互相联系的一种机制，通俗来说想方法中的参数。props是传递机制，对于react组件来说是非常直观的。react单向数据流主要流动管道就是props。props本身是不可变的。组件的props一定来自于默认属性或者通过父组件传递来。
• 用function prop与父组件通信
  对state来说，它的通信集中在组件内部；对于props来说，它的通信时父组件向子组件的传播。对于子组件向父组件通信，可以使用在父组件定义function传递给子组件，子组件触发回调的方式传递给父组件。

propTypes
js不是强类型语言，强类型语言能在开发是定义参数类型的约束，react对此可以使用proptTypes。propType用于规范props的类型与必需的状态。如果组件定义了propType，那么在开发环境下，就会对组件的props值得类型作检查。

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // This must be exactly one element or it will warn.
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

生命周期

react组件的生命周期根据广泛定义描述，可以分为挂载/渲染和卸载这几个阶段。当渲染后的组件需要更新时，又会重新渲染组件，直至卸载。因此，可以把react生命周期分为两类：

• 当组件在挂载或卸载时
• 当组件接收新的数据时，即组件更新时

1. 组件的挂载
   组件挂载是最基本的过程，这个过程主要是做组件状态的初始化。componentWillMount,componentDidMount分别代表了渲染前，渲染后的时刻。包括读取state和props以及两个组件生命周期方法componentWillMount，componentDidMount，这些都只会在组件初始化时执行一次。
   如果在componentDidMount中执行setState方法，组件会再次更新。
2. 组件的卸载
   组件卸载只有componentWillUnmount这一个卸载前状态，常常会在其中执行一些清理方法，如事件回收或清楚定时器
3. 数据更新过程
   更新过程是指父组件向下传递props或组件自身执行setState方法时发生的一系列更新动作。如果组件自身state更新了，那么会依次执行shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。
   shouldComponentUpdate是一个特别的方法，它接受需要更新的props和state，让开发者增加必要的条件判断，让其在需要时才更新。当方法返回false时，组件不再向下执行生命周期方法。
   componentWillUpdate和componentDidUpdate代表更新过程中渲染前后的时刻。componentWillUpdate方法提供需要更新的props和state，componentDidUpdate提供更新前的props和state。不能在componentWillUpdate中执行setState方法。
   如果组件是由父组件更新props引起的更新，那么在shouldComponentUpdate之前会先执行componentWillReceiveProps方法
   
   

​​​​​​​