React特点

React是一个将数据渲染为 HTML视图的js库。简单看来，React 框架主要功能体现在前端 UI 页面的渲染，包括性能优化以及操作简化等等方面。站在MVC框架的角度来看，React操作view层的功能实现。

• 采用组件化模式、声明式编码、函数式编程，提高开发效率和组件复用性
• 它遵循从高阶组件到低阶组件的单向数据流。
• 在 React Native 中可以用 react 预发进行安卓、ios 移动端开发
• 使用虚拟 dom 和 diff 算法，尽量减少与真实 dom 的交互，提高性能

React脚手架

1. 安装 cnpm install -g create-react-app

2. 初始化项目 create-react-app demoNmae

3. 了解react脚手架中的webpack配置文件

   释放配置文件（一般不释放）

   pm run eject（要删除目录下的.git文件） 释放所有的webpack配置文件

4. react设计的核心思想，一切皆为组件，可以细化一个元素

5. eact开发特性：除了react本身这个库，其它的所有解决方案以及依赖库都是社区维护

react中类组件常用的生命周期

一：挂载生命周期

componentDidMount()

可以获取页面节点，修改state初始数据，echarts对象实例化

二：更新生命周期

shouldComponentUpate(nextprops,nextstate)(更新之前)

用于性能优化，当props或state发送变化时，shouldComponentenUpdate()会在渲染执行之前被调用。返回值默认为true。首次渲染或使用forceUpadate()时不会被调用

react中数据定义

一：类组件中（两种方式）

1:直接写state，将类中的state覆盖掉
state = {
		
}
2:在constructor里面写
constructor() {
        // 为了能够继承Component 的构造函数，所以必须使用super()
        super()一：在我们的jsx对象上给定ref属性
二：通过我们的this.refs.属性可以获取到页面节点（不推荐）
三：通过createRef方法来获取，获取到的是一个reactDom对象，current属性为当前的页面节点(推荐)，一般在componentDidMount生命周期，指定echarts图对象
代码如下：
state = {
	node:createRef()
}

render(){
	return (
		<div ref={this.state.node}>
		</div>
	)
}

componentDidMount(){
	this.state.node.current    //当前div的页面节点
}
四：在函数组件中
使用useRef()方法，类似于类组件的createRef方法

        this.state = {
            date: Date.now(),
            __date: Date.now()
        }
    }

二：在函数组件中

使用useState方法
let [state, setState] = useState(initialState);
需要使用值得使用直接state，设置值得时候setState方法  
setState(newState)