什么时候使用功能组件( Functional Component )，使用类组件( Class Component )？
如果您的组件具有状态( state )或生命周期方法，请使用 Class 组件。否则，使用功能组件
在哪个生命周期事件中发出 AJAX 请求？
AJAX 请求应该在componentDidMount生命周期事件中。 有几个原因:
Fiber，是下一次实施React的和解算法，将有能力根据需要启动和停止渲染，以获得性能优势。其中一个取舍之一是componentWillMount，而在其他的生命周期事件中出发 AJAX 请求，将是具有 “非确定性的”。 这意味着 React 可以在需要时感觉到不同的时间开始调用 componentWillMount。这显然是AJAX请求的不好的方式。
-您不能保证在组件挂载之前，AJAX请求将无法 resolve。如果这样做，那意味着你会尝试在一个未挂载的组件上设置 StState，这不仅不会起作用，反而会对你大喊大叫。 在componentDidMount中执行 AJAX 将保证至少有一个要更新的组件。
shouldComponentUpdate 的作用？
在生命周期方法 shouldComponentUpdate 中，允许我们选择退出某些组件（和他们的子组件）的 reconciliation 过程
“和解（ reconciliation ）的最终目标是以最有效的方式，根据新的状态更新用户界面”。如果我们知道用户界面（UI）的某一部分不会改变，那么没有理由让 React 再去弄清楚它是否应该渲染。通过从 shouldComponentUpdate 返回 false，React 将假定当前组件及其所有子组件将保持与当前组件相同
shouldComponentUpdate 用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能，如果在这个方法中能够写出更优化的dom diff算法，就可以极大的提高性能。
组件的生命周期为：
初始化：
getDefaultProps: 获取实例的默认属性
getInitialState: 获取每个实例的初始化状态
挂载阶段：
constructor()
componentWillMount() 组件即将被装载、渲染到页面上
render() 组件生成虚拟的DOM节点
componentDidMount() 组件真正在被装载之后
更新阶段为：
componentWillReceiveProps() 组件将要接收到属性的时候调用
shouldComponentUpdate() 组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻止render调用，后面的函数不会被继续执行）
componentWillUpdate() 组件即将更新不能修改属性和状态
render() 组件重新描绘
componentDidUpdate 组件已经更新
销毁阶段：
componentWillUnmount 组件即将销毁
受控组件( controlled component )与不受控制的组件( uncontrolled component )有什么区别
受控组件是React控制的组件，也是表单数据的唯一真理来源
不受控制( uncontrolled component )的组件是您的表单数据由 DOM 处理，而不是您的 React 组件
React 中的keys是什么，为什么它们很重要？
keys是什么帮助 React 跟踪哪些项目已更改、添加或从列表中删除
什么是 React 的 refs
refs就像是一个逃生舱口，允许直接访问DOM元素或组件实例
向组件添加一个 ref 属性，该属性的值是一个回调函数，它将接收底层的 DOM 元素或组件的已挂接实例，作为其第一个参数
在 React 当中 Element 和 Component 有何区别？
简单地说，一个React element描述了你想在屏幕上看到什么。换个说法就是，一个React element是一些 UI 的对象表示
一个React Component是一个函数或一个类，它可以接受输入并返回一个React elementt（通常是通过 JSX ，它被转化成一个 createElement 调用）
当调用setState的时候，发生了什么？
当调用setState时，React会做的第一件事情是将传递给setState的对象合并到组件的当前状态。这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的React元素树（您可以将其视为 UI 的对象表示）。
一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（diff）。
通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间。
React 基础
一、环境搭建 创建项目
npx create-react-app my-app #创建一个react项目
cd my-app
npm start
二、jsx 语法
JSX 防注入攻击
三、面向数据编程
React 的基本原理：组件（components），属性（props）和状态（state）
1. React是一个声明式的，高效的，并且灵活的用于构建用户界面的 JavaScript 库。它允许您使用”components(组件)“（小巧而独立的代码片段）组合出各种复杂的UI。
2. 组件接收参数，称为 props(属性)，通过 Props 传递数据，并通过 render 方法返回一个显示的视图层次结构，render 方法返回您要渲染的内容描述，然后 React 接受该描述并将其渲染到屏幕上。
3. React 开发人员使用一种名为 JSX (JavaScript XML)的特殊语法，可以更容易地编写这些结构
4. React 组件可以通过在构造函数中设置 this.state 来拥有 state(状态) ，构造函数应该被认为是组件的私有。
5. 在 JavaScript classes(类)中， 在定义子类的构造函数时，你需要始终调用 super 。所有具有constructor 的 React 组件类都应该以 super(props) 调用启动它
6. 要从多个子级收集数据 或 使两个子组件之间相互通信，您需要在其父组件中声明共享 state(状态) 。父组件可以使用props(属性) 将 state(状态) 传递回子节点；这可以使子组件彼此同步并与父组件保持同步。
7. 数据自顶向下流动
父组件通过 属性的形式向子组件传递参数 子组件通过props接收父组件传来的参数
子组件想要和父组件通信 要调用父组件传递过来的方法
四、Component 组件
Mounted：React Components 被render解析生成对应的DOM节点 并被插入浏览器的DOM结构的过程
Update：一个mounted的React Components被重新render的过程
Unmounted：一个mounted的React Components对应的DOM节点被从DOM结构中移除的过程
每一个状态React都封装了hook（钩子）函数
生命周期钩子：
componentDidMount ：挂载函数
componentWillUnmount：卸载函数
React 使用Redux数据流
React 是纯V层框架 需要数据流进行支撑
主流数据流框架： Flux / reFlux / Redux
Redux优势：简单 / 单一状态树
redux 安装：
npm install react-redux redux
资料： https://redux.js.org/
react-redux 项目结构：
-- actions
-- components
-- container
-- reducer
- index.html
- server.js
- webpack
action 、reducer、store介绍：
组件：
使用yeoman 构建项目
npm install -g yo #安装yeoman
yo --version #查看版本
npm install -g generator-react-webpack #安装generator
npm ls -g --depth=1 2>/dev/null | grep generator- #列出npm安装的全局generator包
yo react-webpack gallery-by-react #新建名叫gallery-by-react 的项目
cd gallery-by-react
npm run start #运行项目
构建工具：grunt 、webpack 、browserify、gulp
