來自 React 的 “Hello, world!”

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

React 是一個用於構建用户界面的 JavaScript 庫。

React 使創建交互式 UI 變得輕而易舉。為你應用的每一個狀態設計簡潔的視圖，當數據變動時 React 能高效更新並渲染合適的組件。

本期技術週刊一起了解下 React ，歡迎大家閲讀 ～

文章推薦

《React 內部是如何實現 cache 方法的？》 作者：卡頌

前幾天寫的一篇介紹 use 這個新 hook 的文章中聊到 React 原生實現了一個緩存函數的方法 —— cache。

對於如下代碼，被 cache 包裹的函數，當多次調用時，如果傳參不變，會始終返回緩存值：

const cacheFn = cache(fn);
cacheFn(1, 2, 3);
// 不會執行fn，直接返回緩存值
cacheFn(1, 2, 3);

React 內為什麼需要 cache 方法呢？

《一文解讀 React 17 與 React 18 的更新變化》 作者：JackySummer

項目目前react17和react18都有使用，但在開發者角度絕大部分場景還是感知不到多大變化，但也要詳細瞭解清楚具體更新了什麼。本文就來一次性梳理下 react17與react18的變化。

《一個有趣的交互效果的分析與實現》 作者：夕水

根據視頻所展示的效果，我們得出了我們需要實現的效果主要有 2 個部分:

• 拖拽並吸附
• 滾動半隱元素

那麼如何實現這 2 個效果呢？我們一個效果一個效果的來分析。

ps: 由於這裏採用的是 react 技術棧，所以這裏以 react 作為講解
首先對於第一個效果，我們要想實現拖拽，有 2 種方式，第一種就是 html5 提供的拖拽 api，還有一種就是監聽鼠標的 mousedown，mousemove 和 mouseup 事件，由於這裏兼容的移動端，所以我採用的是第二種實現方法。

思路是有了，接下來我想的就是將這三個事件封裝一下，寫成一個 hook 函數，這樣方便調用，也方便擴展。

《淺析 React 中的 Ref》 作者：Itnd

我們在平常的學習和工作中，在使用函數組件的時候，常常會使用 useState 來生成 state ，每次 state 改變都會引發整個函數組件重新渲染，但是有些 state 的改變不需要更新視圖，那麼我們可以考慮使用 ref 來存儲，ref 存儲的值在發生變化後是不會引起整個組件的重新渲染的。

《手寫一個 mini 版本的 React 狀態管理工具》作者：夕水

目前在React中，有很多各式各樣的狀態管理工具，如：

• React Redux
• Mobx
• Hox

每一個狀態管理工具都有着不盡相同的API和使用方式，而且都有一定的學習成本，而且這些狀態管理工具也有一定的複雜度，並沒有做到極致的簡單。在開發者的眼中，只有用起來比較簡單，那麼才會有更多的人去使用它，Vue不就是因為使用簡單，上手快，而流行的嗎？

有時候我們只需要一個全局的狀態，放置一些狀態和更改狀態的函數就足夠了，這樣也達到了最簡化原則。

下面讓我們一起來實現一個最簡單的狀態管理工具吧。

《React 魔法堂：echarts-for-react 源碼略讀》作者：肥仔John

在當前工業 4.0 和智能製造的產業升級浪潮當中，智慧大屏無疑是展示企業 IT 成果的最有效方式之一。然而其背後怎麼能缺少 ECharts 的身影呢？對於 React 應用而言，直接使用 ECharts 並不是最高效且優雅的方式，而 echarts-for-react 則是針對 React 應用對 ECharts 進行輕量封裝和增強的工具庫。

echarts-for-react 的源碼非常精簡，本文將針對主要邏輯分析介紹。

問答推薦

關於 React 的問題，還有未解決的，歡迎正在閲讀的小夥伴們一起來解決！

關於 React tabs 組件 API 設計的問題 ？
React 是怎麼對比 Dom 節點並進行更新的 ？
React+ ts + vite3 項目中怎麼引用 commonjs 模塊的業務組件？
使用 vue 或 react 全家桶寫頁面比 jquery 加 bootstrap 寫頁面的優勢在哪裏？
是否使用了 react-redux 之後，就沒有必要使用 context 進行傳值了？
React 的函數式組件和類組件，哪種會更好，誰會成為未來趨勢呢？
寫 React 一般使用什麼 Tab 還是 2 個空格進行縮進？

開源軟件推薦

「 Answer 」—— 是 SegmentFault 思否團隊對外開源問答社區軟件

Answer 不僅擁有搭建問答平台（Q&A Platform）的基礎功能，還在產品設計上融入了開發團隊對社區發展的思考， 並將其經驗產品化，加入了標籤內容管理、徽章與聲望值體系等功能。

歡迎每一位開發者的參與和貢獻，如果你對產品設計與社區發展有任何想法和建議，都可以在 GitHub 上找到我們，共同建設 Answer 社區。

項目地址是：https://github.com/answerdev/...
項目官網是：https://answer.dev

# SegmentFault 技術週刊 #

「技術週刊」是社區特別推出的技術內容系列，一週一主題。

每週二更新，歡迎「關注」。大家也可以在評論處留言自己感興趣的主題，推薦主題相關的優秀文章。

如有問題可以添加小姐姐微信~