前端跳槽突围课：React18底层源码深入剖析(完结)
获取ZY↑↑方打开链接↑↑
Thinking in React，即用React的方式写React-1
"Thinking in React" 是一种指导原则，帮助开发者以React的思维方式来构建应用程序。React是一个用于构建用户界面的JavaScript库，它强调组件化的设计模式。以下是如何按照“Thinking in React”的方式来思考和构建React应用程序的步骤：
步骤1：拆分UI成组件
确定页面结构：首先，从高层次上考虑你的应用程序，将它划分为多个可视化的块或组件。
绘制草图：画出一个草图，标记出页面上的各个部分，并考虑哪些部分应该被抽象成独立的组件。
组件列表：列出所有需要创建的组件，考虑哪些组件可以复用。
步骤2：建立静态组件
从最外层开始：构建最外层的组件，通常是应用程序的主要容器。
逐步细化：逐步向下细化，为每一个子组件编写静态版本（即不涉及任何状态或交互的版本）。
使用props传递数据：考虑如何通过props将数据从父组件传递给子组件。
步骤3：确定组件间的数据流
理解状态：确定哪些组件拥有状态，以及这些状态是如何变化的。
确定数据来源：考虑数据是如何进入你的组件树的，以及数据是如何更新的。
决定何时使用state：确定哪些状态应该保存在组件的state中，哪些应该通过props传递。
步骤4：添加交互
识别用户事件：考虑用户可能触发的事件，如点击按钮、填写表单等。
更新状态：确定如何根据用户的动作更新组件的状态。
重构组件：随着应用程序变得越来越复杂，可能需要重构组件以保持它们的可维护性。
步骤5：思考路由
使用React Router：如果应用程序需要导航和路由功能，可以考虑使用React Router来管理页面之间的跳转。
考虑页面间的共享逻辑：考虑是否有一些组件可以在不同的路由中复用。
示例代码
这里是一个简单的例子，展示如何根据“Thinking in React”的方法来构建一个计数器应用：
jsx
深色版本
// Counter.js
import React from 'react';
function Counter({ count, onIncrement, onDecrement }) {
return (
-
{count}
+
);
}
export default Counter;
jsx
深色版本
// App.js
import React, { useState } from 'react';
import Counter from './Counter';
function App() {
const [count, setCount] = useState(0);
const onIncrement = () => setCount(count + 1);
const onDecrement = () => setCount(count - 1);
return (
Simple Counter
);
}
export default App;
在这个例子中：
我们首先定义了Counter组件，它负责显示计数器和提供增减按钮。
在App组件中，我们使用useState来管理计数器的状态，并将状态值和事件处理函数作为props传递给Counter组件。
遵循这些步骤可以帮助你构建出易于理解和维护的React应用程序
