React 介绍

概述

A JavaScript library for building user interfaces
用来构建用户界面一个JS库

理念

UI = render(data)
数据驱动视图

UI：视图，一个函数的执行结果
render：纯函数，没有任何副作用
data: state,状态驱动视图变化

Virtual DOM 虚拟DOM

直接修改DOM元素的代价太大，通过虚拟DOM的变化，引起真实DOM的变化，相对cheap。

流程图

事件 —-> render —-> virtual DOM 变化 —-> DOM节点修改

数据

props 组件对外接口

state 组件内部状态

区别

• prop用于定义外部接口
• state用于记录内部状态
• prop的赋值在外部世界使用组件时
• state的赋值在组件内部
• 组件不应该改变prop的值
• state存在的意义就是让组件发生改变

生命周期

三个过程：

• 装载过程（Mount）也就是把组件第一次在DOM树上渲染的过程
• 更新过程（Update）当组件被重新渲染的过程
• 卸载过程（Unmount）组件从DOM树上删除的过程

装载过程生命周期方法：

• constructor
• componentWillMount 在此方法内setState无效
• render 纯函数 并不往状态树上挂在DOM，只是返回一个JSX对象，React库根据返回对象决定如何渲染
• componentDidMount 可以再次方法内获取到任何组件内DOM节点，因为组件已经挂载完毕

更新过程生命周期方法：

• componentWillReceiveProps(nextProps) 通过setState方法出发更新不会调用此函数
• shouldComponentUpdate(nextProps,nextState) 最重要函数之一，必须有返回结果（boolean类型），可以通过定制此函数决定组件是否需要重新渲染，进而提升性能
• componentWillUpdate 不可以在此方法内setState,会造成死循环
• render
• componentDidUpdate 不可以在此方法内setState,会造成死循环
• componentDidCatch(err, info)(v16新特性) componentDidCatch

---

this.forceUpdate();可以暴力的触发一次重新绘制（render）

---

卸载过程生命周期方法：

• componentWillUnmount

组件分类

• stateless: 无状态组件
• class: 类组件
• functional: 函数式组件

提高效率

脚手架 & tools

• create-react-app
• create-component-app
• styled-components

---

npm i create-react-app -g  
npm i create-component-app 
npm i styled-components --save 

---