React阶段性总结

React简介 ：

React 是一个用于构建用户界面的 JAVASCRIPT 库，主要用于构建UI。

React由美国的公司Facebook在2011年诞生并于2013年开源发布

特点：

1.声明式设计 −React采用声明范式，可以轻松描述应用。

2.高效 −使用虚拟dom+优秀的diffing算法，减少了与真实dom的交互

React中的组件类型：

class组件(类组件)：

在 class 类组件中 React 元素的位置是在 render() 函数中，也就是说，类组件中必须有一个 render() 函数，在 render() 函数中必须有 return 的值，这个值必须是虚拟 DOM（React 元素）。

函数组件(无状态组件)：

1. 组件名字首字母是大写的
2. 函数组件又叫无状态组件，没有生命周期
3. 函数组件只有当展示视图的时候才用。做复杂的数据处理、需要有自己的状态的时候，需要用类组件。

JSX语法：

在使用react框架开发后发现里面用jsx语法代替了javascript
jsx语法是一个类似于XML的js语法扩展

jsx优点：
1.JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2.它是类型安全的，在编译过程中就能发现错误。
3.使用 JSX 编写模板更加简单快速。

State:

State是可读可写的，但是必须要用setState来修改

Props:

Props是只读的

使用场景：
1.父传子：props.children 接收父组件(闭合组件)传入的数据

2.子传父：子组件通过调用父组件传递到子组件的方法向父组件传递消息的。

3.同级互传：通过父级中介实现兄弟a组件的数据给到兄弟b组件

具体流程：组件A – 传值 --> 父组件 – 传值 --> 组件B

4.接收组件
 

React生命周期：

挂载阶段：

constructor （初始化数据，挂载前（只在页面加载时执行一次））

render （渲染数据/dom片段到页面（非一次性，可多次触发））

componentDidMount  挂载完成（一般用于发起ajax请求，定时器）

更新阶段：

render

componentDidUpdate （更新完成）

销毁阶段：

componentWillUnmount （销毁一半用于清除定时器，取消ajax请求）