React学习——React思想

Keeping Components Pure(保持组件纯粹)

纯函数（Pure functions）

部分 JavaScript 函数是纯粹的，这类函数通常被称为纯函数。纯函数仅执行计算操作，不做其他操作。React 的核心原则是“渲染时要纯净”（也叫纯函数思想）。（纯函数的两个特点：不会更改在该函数调用前就已存在的对象或变量；给定相同的输入，返回相同的结果）

在 React 中，你可以在渲染时读取三种输入：props，state 和 context。你应该始终将这些输入视为只读。

当你想根据用户输入 更改 某些内容时，你应该 设置状态，而不是直接写入变量。当你的组件正在渲染时，你永远不应该改变预先存在的变量或对象。

事件处理函数（event handler）

更新屏幕、启动动画、更改数据等变动，被称为副作用（side effects），它们是 “额外” 发生的事情，与渲染过程无关。在 React 中，副作用通常属于 事件处理程序。事件处理程序是执行某些操作（如单击按钮）时运行的函数。即使事件处理程序是在组件内部定义的，它们也不会在渲染期间运行。因此事件处理程序无需是纯函数。

function MyComponent() {
  function handleClick() {
    alert('按钮被点击了'); // ✅ 这是副作用！但放在事件处理函数里是安全的
  }

  return <button onClick={handleClick}>点我</button>;
}

useEffect

如果无法为副作用找到合适的事件处理程序，可以调用组件中的 useEffect 方法（一个React Hook）将其附加到返回的 JSX 中。

例如

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // ✅ 这里可以写副作用，比如发请求、改标题
    document.title = '页面加载了';
  }, []); // [] 表示只在组件挂载时运行一次

  return <h1>Hello</h1>;
}

Understanding Your UI as a Tree

UI 是一棵树

你写的 JSX（比如多个嵌套组件），在 React 眼中会组成一棵“组件树”，每个组件都是这棵树的一个节点。比如：

<App>
  <Header />
  <Main />
  <Footer />
</App>

React 会把它理解成这样一棵树：

App
├── Header
├── Main
└── Footer

每次渲染，React 会从树的根部（<App />）开始，向下“构建”这棵树，每个组件就是一个“函数”，返回的是 UI（也就是 JSX）

React 每次渲染“从头开始构建 UI 树”

每次组件状态变化、或 props 变化时，React 会重新执行组件函数，构建出一颗新的“UI 树”。（实际上 React 内部会高效对比前后的树结构（虚拟 DOM diff），只更新真正变了的地方。）

为什么要组件纯粹

组件在构建树的时候如果不纯粹，（比如修改全局变量、用 Date.now、修改 props 等），那这棵“树”每次构建出来就不一样，React 就很难判断哪部分变了。

总结

• 每个组件就像一个节点，返回的是“它的那一部分 UI”。

• React 每次渲染就是“从头开始执行组件函数”，重新生成一颗“描述 UI 的树”。

• React 自动帮你找出需要更新的部分（不要自己动 DOM）。