这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天

React

React(hooks)的写法

React的代码例子：

import React,{ useState, useEffect }from 'react';

funtion Example(){
    const [count, setCount] =useState(0);
    
    //Similar to componentDidMount and componentDidUpdate:
    useEffrct(()=>{
    //Update the document title using the browser API
    document.title='You cliked ${count} times';
    });
    
  return(
  <div>
  <p>You clicked {count}times </p>
  <button onClick={()= setCount(count+1)}>
    Clike me
   </button>
   </div>
  );
  }

useState
传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改

useEffect
传入一个函数，和一个数组，数组是状态的数组，称为依赖项，该函数在mount时，和依赖项被set的时候会执行。
有“副作用”的函数，要传入useEffect来执行，副作用代表除了单纯的计算之外，还需要做其他的一些事情，比如网络请求，更新DOM，localStorage存储数据等。

Hook 使用法则
useState和useEffect都是hook,不要在循环、条件、或者嵌套函数中调用Hook

React的实现

React实现中存在的问题

1. JSX不符合JS的语法
2. 返回的JSX发生改变的时候，如何更新DOM
3. State/Props 更新时，要重新触发render函数，render函数就是组件函数本身

Virtual DOM(虚拟DOM)
虚拟DOM用于和真实的DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。真实的DOM是浏览器内部的一个状态，只能通过DOM接口去修改DOM，DOM并不是JS中的一个对象。

它赋予了React声明式的API：告诉React希望让UI是什么状态，React就确保DOM匹配该状态，这样可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

指令式编程：手动告诉程序每一个步骤怎么做
声明式编程：只需要描述状态改变，发出指令，不需要写底层的代码
响应式编程：是声明式编程的一个类别，当一个状态改变的时候可以更新依赖的状态，也可以更新UI
很多的前端框架都是声明式的，但是浏览器本身不支持声明式的语法，因为浏览器需要更高的自由度。

TradeOff:更新次数少，和计算速度快。
完美的最小Diff算法，需要O(n^3)的复杂度。牺牲理论最小的Diff,换取时间，得到O(n)复杂度的算法：Heuristic O(n) algorithm(启发式算法)。从全局最优改变成局部最优。

How to Diff

元素	操作
不同类型的元素	替换
同类型的DOM元素	更新
同类型的组件元素	递归

React目前存在的问题：当一个父组件状态的改变，所有嵌套的子节点，包括它的子子节点，都会递归地发生变化，这样会比较影响性能。

React状态管理库

为了解决状态共享问题，可以考虑React状态管理库，但是这种方案会降低组件的复用性。

推荐的状态管理库

状态机
当前状态，收到外部事件，迁移到下一个状态。

Modern.js/Reduck

应用级框架