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

React（Hooks）的写法与 React 的实现

React （Hooks）的写法

代码示例：

import React, {useState} from 'react'

function Example() {
    const [count, setCount] = useState(0)
    
    return (
        <div>
            <p>You liicked {count} times</p>
            <buton onClick={() => setCount(count + 1)}>
                Click me
            </buton>
        </div>
    )
}

改变 count 的时候不是直接改变，而是通过调用 setCount 去改变 count 的值。

useState:

如果我们需要创建一个响应式变量，需要将初始值传入该函数，它的返回值分别是该变量以及修改该变量的函数，(这里我们通过解构的方法来获取变量)，若要改变该变量的数值，需要通过setCount来改变，这样才能实现响应式变量。

下面这段代码在上面的代码基础上增加了一个小功能：将 document 的 title 设置为包含了点击次数的消息。

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

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect: 通过使用这个 Hook，可以告诉 React 组件需要在渲染后执行某些操作。React 会保存传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。在这个 effect 中，我们设置了 document 的 title 属性，不过我们也可以执行数据获取或调用其他命令式的 API。

Tips： 不要在循环，条件或嵌套函数中调用 Hook

React 的实现

Problems：

JSX 不符合 JS 标准语法

返回的 JSX 发生改变时，如何更新 DOM

State/Props 更新时，要重新触发 render 函数

JSX 不符合 JS 标准语法

问题一.jpg

将左侧高级语言片段转化为符合 React 语法的代码片段

返回的 JSX 发生改变时，如何更新 DOM

Virtual DOM ( 虚拟DOM)

Virtual DOM 是一种用于和真实 DOM 同步，在 JS 内存中维护的一个对象，它具有和 DOM 类似的树状结构，并和 DOM 可以建立对应的关系。

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

响应式系统与 React（二）| 青训营笔记

React（Hooks）的写法与 React 的实现

React （Hooks）的写法

React 的实现