react 分类

React 启航

学习 React 的好处

就业：全球 Web 开发首选框架、全栈工程师的首选
React：全球第一，既能构建 Web 应用，又能构建原生应用。
- 用组件创建用户界面、用代码和标签编写组件、可在任何 HTML 页面中添加 React
- 全栈 React 开发框架：Next.js、Remix
- 社区有数百万人
React vs Vue

React vs Vue

全球指数2024年12月13日...大约 3 分钟

React 脱围机制（Escape Hatches）

参考

怎样“记住”信息，而不触发重新渲染？

可以使用 ref，它会记住信息，ref 的变更也不会触发新的渲染。

ref 和 state 的区别

ref	state
useRef	`useState`
修改时不触发渲染	修改时触发渲染
可变，可以在渲染过程之外修改 current 的值	“不可变”，你必须使用 state setter 函数修改 state，从而排队重新渲染
不应在渲染期间读取、写入 current	可以随时读取 state，但每次渲染都有自己不变的 state 快照

何时使用 useRef？
- 当组件需要跳出 React 与外部 API 交互时就会用到 ref，如：存储 timeout ID
- 存储和操作 DOM 元素
- 存储不需要被用来计算 JSX 的其他对象
ref 的最佳实践
- 将 ref 视为脱围机制：当使用外部系统或浏览器 API 时，如果应用程序逻辑和数据流很大一部分依赖于 ref，你可能需要重新考虑你的设计。
- 不要在渲染过程中读取或写入 ref.current：通常渲染过程中需要某些信息，应该使用 state，而不是 ref。

全球指数2024年12月6日...大约 13 分钟

React 状态管理

参考

将 UI 视为 state

声明式 UI 编程与命令式 UI 编程有何不同？

全球指数2024年12月3日...大约 13 分钟

React UI 入门

参考

怎样写 React UI ？

在 React 中，我们可以用 JSX 来写 UI， JSX 是 JavaScript 的一种语法扩展，它允许我们在 JavaScript 代码中嵌入 HTML 标签。
```
function Profile() {
  return (
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  );
}
```
文件扩展名：.js、.jsx、.tsx
- .jsx 是 JavaScript 的 JSX 语法。
- .tsx 是 TypeScript 的 JSX 语法。

全球指数2024年11月30日...大约 2 分钟

React 交互

参考

如何响应事件？

通过组件的 props 来定义事件处理函数，从而响应用户的输入。

function DemoOnClick() {
  const [info, setInfo] = useState("");
  const handleClick = (e: React.MouseEvent) => {
    const target = e.target as HTMLButtonElement;
    setInfo(`点击了：${target.innerText}`);
  }
  return (
    <div>
      <MyButton name="Play Movie" onClick={handleClick} />
      <MyButton name="Upload Image" onClick={handleClick} />
      <br />
      <p>{info}</p>
    </div>
  );
}
function MyButton({ name, onClick }: { name: string; onClick: (e: React.MouseEvent) => void; }) {
  return <button onClick={onClick} style={btnStyle}>{name}</button>;
}

全球指数2024年11月30日...大约 2 分钟

React 哲学

提示

本文是 React 哲学的学习整理

问题

拿到一个界面原型，怎样使用 React 来实现？

解题步骤

拆解 UI 为组件层级结构
用 React 构建一个静态版本
找出 state，排除那些不是 state 的
- 随时间 保持不变？——不是 state
- 通过 props 从父组件传递？——不是 state
- 基于已存在于组件中的 state 或 props 进行计算？——不是 state
放置 state 到组件层级结构中：state 放置到需要它的组件的 最近的共同父组件 中
添加反向数据流：通过事件处理器更新 state