一. React 框架简介

1. 介绍

CS 与 BS结合：像 React，Vue 此类框架，转移了部分服务器的功能到客户端。将CS 和 BS 加以结合。客户端只用请求一次服务器，服务器就将所有js代码返回给客户端，所有交互类操作都不再依赖服务器。客户端只有在需要服务器的数据时才会使用json通信一下，其他时间都在客户端利用js操作、暂存数据这样就极大减轻了服务器压力。

2. React特性

虚拟DOM树

React 通过对 DOM 的模拟，最大限度地减少与DOM的交互。将网页的DOM树完全复制一份虚拟的 DOM 树放到内存中。

数据驱动

维护虚拟 DOM 树，当发现某些节点发生变化时，并不一定修改原来的 DOM 树（在网页中看到的每一个区域），比如某些分支可能会发生该改变时，首先会修改虚拟树中的这几个节点，而后将这几个节点与原节点对比。才会对真正发生改变的节点做出修改。

JSX文件

为了构建交互式用户界面，使用了 JSX。JSX 的完整版本是一个JavaScript语法扩展，它极大地简化了组件的创建。它支持HTML引用并使子组件渲染更容易。它本质上是一组 React 编写快捷方式。使用带有一些规则的 createElement 可以使源代码更具可读性和直接性。首先写jsx文件，运行时会先将所编写的jsx编译为js，编译完之后，将js文件运行在浏览器。

3. React基础

Props/State/Refs
React属性Props:组件其实就是函数，接受特定的输入（props），产生特定的输出（React Elements.return jsx）。React的组件必须像纯函数那样使用其props，props是外部传入的，不可修改。
React状态State:状态是私有的，组件内部的数据可以动态改变，通过this.setState()方法。
Refs:Refs可以用来操作DOM，使用场景有：获取图片宽高、输入框聚焦。要写成回调形式的ref。
Forms表单是受控组件，用Refs将其转换为非受控组件。
Context
Props是由上到下单向传递的，Context提供了在组件中共享全局数据的方法。
React.createContext() Context是一个对象，里面有两个变量：Provider和Consumer,都是组件，在根节点外侧用Provider进行包裹，在需要使用此数据的结点外侧用Consumer包裹。
组件间通信
利用redux可以支持任何形式的通信。
父向子：父组件向子组件传递props，子组件通过props拿到数据。

function Child(props){//子
    console.log(props.n)
    return <h1>子组件</h1>
}
function Father(props){//父
    return <Child n={props.num}/>
}
function App() {//祖先
	const [num,setNum]=useState(1);
    return <Father num={num}/>
}

子向父：利用回调函数：父组件将一个函数作为 props 传递给子组件，子组件调用该回调函数，便可以向父组件通信；（真正干活的永远是父组件）

function Child(props){
    console.log(props.n)
    return (
        <>
        <h1>{props.n}</h1>
        <button onClick={()=>props.changeNum(123)}>点击修改num</button>
        </>
    )
}
function Father(props){
    return <Child n={props.num} changeNum={props.changeNum}/>
}
function App() {
	const [num,setNum]=useState(1);
    const changeNum=(arg)=>{
        setNum(arg)
    }
    return <Father num={num} changeNum={changeNum}/>
}

React的render函数，哪些情况下会被重新执行？

当组件的State/传入的props发生改变、或forceupdate()时，组件和其子组件会递归地重新调用render函数。

二. 配置环境

安装 Git Bash
安装 Node.js
安装 create-react-app
打开 Git Bash，直接输入此命令执行： npm i -g create-react-app
创建 React 项目，名为 React App
在目标目录（自己存放项目的目录）下右键打开 Git Bash，执行下面的命令

create-react-app react-demo
启动项目
进入目录，目录进到 react-demo 这一层，打开 Git Bash，输入下面命令

npm start dev

三. React代码优化性能

react性能优化

减少setState,与视图层无关的属性不要放到state上；
不要滥用props；
组件尽可能拆分和解耦，比如input和list组件，list组件最好只在自己数据变化时重新渲染，不然input更新list组件也会重新渲染；
遍历时使用key;
类组件中PureComponent （但因为是浅比较，所以要使用不可突变数据结构，或者用immutable.js跟踪变化）:当父组件更新时，如果子组件的 props 和 state 都没发生改变， render 方法就不会触发，省去 Virtual DOM 的生成和比对过程，达到提升性能的目的。具体就是 React 自动帮我们做了一层浅比较，减少了自己去写shouldComponentUpdate（）：React性能优化：PureComponent的使用原则；函数组件中用memo、useCallback、useMemo。
懒加载

四. React与Vue的区别

react是单向数据流，vue是双向数据绑定，比起vue，react的单向数据流使得代码量更多一些；

react是函数式编程，易于封装和扩展，灵活度更高，具备丰富的js库；vue的灵活度不如react；

react生态圈强大，同时适用于web端和原生app

react写的是jsx，写起来更接近原生js，经过转译会变成js，自由度高；而vue用了很多模板语法，自由度变低；

响应式系统与React ｜ 青训营