数据驱动视图

状态由 React 保存，并关联到组件在渲染树中的位置。

let count = 0;

const button = document.querySelector("button");
const text = document.querySelector("#count");

button?.addEventListener("click", () => {
  count += 1;

  if (text) {
    text.textContent = String(count);
  }
});

数据 count
页面上的文字

import { useState } from "react";

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

  return (
    <button onClick={() => setCount((value) => value + 1)}>
      当前数量：{count}
    </button>
  );
}

当 count 是某个值时，页面应该长什么样

setCount((value) => value + 1);

function UserPage() {
  const [userName, setUserName] = useState("小明");

  return (
    <UserCard
      userName={userName}
      onRename={setUserName}
    />
  );
}

type UserCardProps = {
  userName: string;
  onRename: (name: string) => void;
};

function UserCard({ userName, onRename }: UserCardProps) {
  return (
    <div>
      <div>{userName}</div>
      <button onClick={() => onRename("小红")}>
        修改名字
      </button>
    </div>
  );
}

父组件保存状态
  -> 通过 Props 把数据传给子组件
  -> 子组件触发回调
  -> 父组件更新状态
  -> React 重新渲染

到底是谁改了数据？
什么时候改的？
为什么这个组件重新渲染了？

UI = render(props, state, context);

function Greeting({ name }: { name: string }) {
  return <div>你好，{name}</div>;
}

let renderCount = 0;

function Greeting() {
  renderCount += 1;

  return <div>渲染次数：{renderCount}</div>;
}

function UserPage() {
  document.title = "用户页面";
  localStorage.setItem("visited", "true");
  fetch("/api/users");

  return <div>用户页面</div>;
}

渲染过程保持纯净。

function Greeting({ name }: { name: string }) {
  return <div>你好，{name}</div>;
}

import { Component } from "react";

type CounterState = {
  count: number;
};

export class Counter extends Component<object, CounterState> {
  state: CounterState = {
    count: 0,
  };

  render() {
    return (
      <button
        onClick={() => {
          this.setState(({ count }) => ({
            count: count + 1,
          }));
        }}
      >
        当前数量：{this.state.count}
      </button>
    );
  }
}

this.state

componentDidMount()
componentDidUpdate()
componentWillUnmount()

import { useEffect, useState } from "react";

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

  useEffect(() => {
    document.title = `当前数量：${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount((value) => value + 1)}>
      当前数量：{count}
    </button>
  );
}

class ChatRoom extends Component {
  componentDidMount() {
    connect(this.props.roomId);
  }

  componentDidUpdate(previousProps) {
    if (previousProps.roomId !== this.props.roomId) {
      disconnect(previousProps.roomId);
      connect(this.props.roomId);
    }
  }

  componentWillUnmount() {
    disconnect(this.props.roomId);
  }
}

function ChatRoom({ roomId }: { roomId: string }) {
  useEffect(() => {
    connect(roomId);

    return () => {
      disconnect(roomId);
    };
  }, [roomId]);

  return <div>聊天室：{roomId}</div>;
}

function useOnlineStatus() {
  // 监听网络状态
}

const isOnline = useOnlineStatus();

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

  return (
    <button onClick={() => setCount((value) => value + 1)}>
      {count}
    </button>
  );
}

const count = 0;

function Counter() {
  const [count, setCount] = React.读取当前组件位置上的状态(0);

  return <button>{count}</button>;
}

Hook 状态挂在 Fiber 节点上

状态由 React 保存，并和组件在渲染树中的位置关联。

function UserPage({ isLoggedIn }: { isLoggedIn: boolean }) {
  if (isLoggedIn) {
    const [userName, setUserName] = useState("");
  }

  const [theme, setTheme] = useState("light");

  return <div>{theme}</div>;
}

第一个 Hook -> userName
第二个 Hook -> theme

第一个 Hook -> theme

function UserPage({ isLoggedIn }: { isLoggedIn: boolean }) {
  const [userName, setUserName] = useState("");
  const [theme, setTheme] = useState("light");

  return <div>{isLoggedIn ? userName : theme}</div>;
}

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

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

  return <div>{count}</div>;
}

setCount(1);

请安排一次新的渲染，并在新的渲染中使用更新后的状态。

函数组件是严格意义上完全没有外部依赖的纯函数。

函数组件的渲染过程应该是纯净、幂等的。
组件根据当前 Props、State 和 Context 计算 JSX。

useEffect(() => {
  document.title = `当前数量：${count}`;
}, [count]);

声明一个 Effect

渲染阶段
  -> 根据 Props、State、Context 计算 JSX

提交阶段
  -> 把必要变化更新到 DOM

之后
  -> 执行 useEffect 中声明的同步逻辑

useEffect 是一个让组件与外部系统同步的 Hook。

useEffect(() => {
  const connection = createConnection(roomId);
  connection.connect();

  return () => {
    connection.disconnect();
  };
}, [roomId]);

清理旧连接
  -> 建立新连接

清理当前连接

function UserName({ firstName, lastName }: {
  firstName: string;
  lastName: string;
}) {
  const [fullName, setFullName] = useState("");

  useEffect(() => {
    setFullName(`${firstName} ${lastName}`);
  }, [firstName, lastName]);

  return <div>{fullName}</div>;
}

function UserName({ firstName, lastName }: {
  firstName: string;
  lastName: string;
}) {
  const fullName = `${firstName} ${lastName}`;

  return <div>{fullName}</div>;
}

我是在根据已有数据计算结果，
还是在同步 React 外部的系统？

function SubmitButton() {
  async function handleClick() {
    await saveForm();
    alert("保存成功");
  }

  return <button onClick={handleClick}>保存</button>;
}

function Counter() {
  return <button>0</button>;
}

useState()
useEffect()
useContext()

Hook 让函数组件接入 React 的状态和生命周期相关能力。

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

const timerRef = useRef<number | undefined>(undefined);

let count = 0;

let count = 0;

不要在渲染过程中执行副作用。

State 与组件在渲染树中的位置关联。

组件和 Hook 的渲染逻辑应该保持纯净、幂等，并避免修改非局部值。

当前 Props、State、Context
  -> 计算下一版 UI
  -> React 提交必要的 DOM 更新

useState
  -> 读取当前渲染对应的状态快照
  -> 请求下一次状态更新

useEffect
  -> 声明需要在渲染提交后执行的外部同步逻辑
  -> 依赖改变或组件卸载时清理旧逻辑

渲染阶段只负责计算 UI
事件处理函数负责响应用户操作
Effect 负责同步外部系统
React 负责保存状态和安排更新