React总结（一）-- 概述

用react开发了管理后台、对react有一定的了解，在此做个总结。

react介绍

1. react 工作原理：

Virtual dom机制：由虚拟dom管理真实dom的更新。

对于每一个组件，react会在内存中构建一个相对应的dom树，当组件状态发生变化时，react都会重新构建整个dom数据，将当前整个dom树和上一次的dom树通过diff算法进行对比，得出dom结构变化的部分，计算出最小的步骤更新真实dom。整个过程再内存中进行，因此效率比较高。

2. react特点：

高效：虚拟dom，通过对dom的模拟，最大限度减少与dom的交互。
灵活：可以与已有的框架或库很好的配合。
jsx：直观定义用户界面，react的核心组成部
组件：构建组件，使代码更容易得到复用。
单项响应数据流：变化可预计、可控制。

3. react创建组件：

1. 创建组件两种方式：
   - 无状态组件
   - 类组件（ES6的class）
2. 原则： 遵守单一职责的原则
3. 一个类组件包含什么：
   属性：props
   内部状态： state
   处理逻辑： 列表、表单、条件渲染
   事件处理： onClick ….
   渲染：render
   生命周期函数
4. 组件创建技巧
   - 组件应该尽可能的无状态化。
   - 减少冗余并易于解释程序运作过程。
   - 创建多个只负责渲染数据的无状态组件，在他们的上层创建一个有状态的组件并把状态通过props传递给子级。
   - 有状态组件封装了所有用户的交互逻辑，无状态组件只负责声明式渲染数据。

4.react的state和props区别：

1. props
   - 父级向子级传递数据的一种方式。
   - 只读的属性，从父组件传入，组件内部不能更改

2. state
   - 存在于组件内部：
   - 只能在组件内部通过this.setState()进行更改。
   - 更新state之后重新渲染用户界面。

3. 哪些应该设置为state，
   - 仅包括能表示拥护界面状态所需要的最少数据。
   - state应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。
   - 保持数据的精简，冗余数据无需存入state中

4. setState 何时更新？
   详细情况见reac总结之生命周期。。。