执行和清除Effect的时机

React 何时清除 effect？ React 会在组件卸载的时候执行清除操作。众所周知，effect 在每次渲染的时候都会执行，而这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除，因为这有助于避免Bug，这是React的默认行为。

原因：为什么每次更新的时候都要运行 Effect

如果你已经习惯了使用 class，那么你或许会疑惑为什么 effect 的清除阶段在每次重新渲染时都会执行，而不是只在卸载组件的时候执行一次。

例如订阅好友在线状态的组件：

Antd Pro 新手上路基础知识

参照学习内容：

新手须知

各种库

• dva
• Ant Design Chart简单好用的 React 图表库
• ProComponents 模板组件
• useModel 简易数据流

Antd 表单基础使用

获取表单实例

表单数据操作

Antd form表单的使用、设值、取值、清空值

1、使用

{this.props.form.getFieldDecorator("key",{})(<Input />)}

React 中的 Fiber（纤程）及其工作原理

代数效应

代数效应能够将副作用（例子中为请求图片数量）从函数逻辑中分离，使函数关注点保持纯粹。（函数调用产生的副作用不需要使用者关心，并且是上下文无关的，并不与上下文逻辑相绑定）

Fiber

Fiber并不是计算机术语中的新名词，他的中文翻译叫做纤程，与进程（Process）、线程（Thread）、协程（Coroutine）同为程序执行过程。

React 架构

因为v15不能满足快速响应的理念（或者说原先的设计缺陷），React从v15升级到v16后重构了整个架构。

React 15 架构

React15架构可以分为两层：

• Reconciler（协调器）—— 负责找出变化的组件
• Renderer（渲染器）—— 负责将变化的组件渲染到页面上

Reconciler（协调器）

我们知道，在React中可以通过this.setState、this.forceUpdate、ReactDOM.render等API触发更新。

笔记内容来自于：

React官网

React技术揭秘

添加了个人笔记注释和观点，希望能帮助大家理解。此外，如果想要完整阅读原文内容，请前往卡颂的网站 React技术揭秘。

如何展示对话框，并给对话框传递参数？

案例导入：处理对话框的误区为了方便你理解这两点，我给你举一个实际场景的例子，你就能明白为什么说在 React 中，常用的对话框是比较难处理的。比如说我们需要实现下面这个截图演示的功能：

那么，一般会用类似下面的代码逻辑去实现：

function MainLayout() {
  const [modalVisible, setModalVisible] = useState(false);
  const [user, setUser] = useState(null);
  const showUserModal = (user) => {
    setModalVisible(true);
    setUser(user);
  }
  return (
    <div className="main-layout">
      <Sider onNewUser={showUserModal}/>
      <UserList onEditUser={user => showUserModal(user)}/>
      <UserInfoModal visible={modalVisible} user={user} />
    </div>
  );
}

React 中使用 TypeScript

笔记总结自《TS全面进阶指南》

泛型坑位

useState

基本类型

首先是 useState，可以由输入值隐式推导或者显式传入泛型：

const Container = () => {
  // 推导为 string 类型
  const [state1, setState1] = useState('linbudu');
  // 此时类型为 string | undefined
  const [state2, setState2] = useState<string>();
};

useReducer：类Redux的useState替代方案

const [state, dispatch] = useReducer(reducer, initialArg, init);

UmiJS 乌米学习实战🍚

参照文档

官方文档

Umi 4 发布啦 🎈

umi3教程