ZHANGYU.dev

All about "React"

I wrote a new blog using Next.js App router

ReactNext.js

Rebuilding my blog with React Server Components and GitHub Discussions for a cutting-edge, backend-free, visually appealing experience.

Read more about I wrote a new blog using Next.js App router

React 单元测试入门指南

React

Unit testing is essential for writing component libraries. Popular testing libraries in React are Enzyme and react-testing-library. This article focuses on using react-testing-library with Jest for testing.

Read more about React 单元测试入门指南

一文搞懂React中props导致的更新

React

Discussion when React components update, ways to avoid unnecessary updates, and the usage of useCallback and useMemo.

Read more about 一文搞懂React中props导致的更新

React中Props的浅对比

React

Explanation of how props comparison is done in React's PureComponent and functional components using React.memo. Shallow comparison logic in shallowEqual function.

Read more about React中Props的浅对比

React中Diff算法源码浅析

React

React's Diff algorithm, also called reconcilation algorithm, handles element changes like addition, movement, deletion during the update process.

Read more about React中Diff算法源码浅析

React事件机制源码浅析

React

React v17 introduces significant changes to the event mechanism compared to v16. It analyzes event delegation, event types, synthetic events, and event triggering process.

Read more about React事件机制源码浅析

浅析React中的EffectList

React

React organizes effects into an EffectList during Fiber tree construction to efficiently manage component lifecycle methods and side effects.

Read more about 浅析React中的EffectList

有关Hook实现getDerivedStateFromProps的小思考

React

Comparison between getDerivedStateFromProps in class components and its absence in function components, with workarounds using hooks.

Read more about 有关Hook实现getDerivedStateFromProps的小思考

useMemo和useCallback源码浅析

React

Briefly explains the code implementation of useMemo and useCallback hooks in React version 17.0.1. useMemo memoizes values based on dependencies, while useCallback memoizes callbacks.

Read more about useMemo和useCallback源码浅析

React Context精准更新

React

The method uses bitwise operations for precise Context updates based on specific values without causing all components to refresh.

Read more about React Context精准更新

React Context源码浅析

React

In React, the valueStack in Fiber nodes stores Context information, with old values pushed and popped to maintain hierarchy between nodes.

Read more about React Context源码浅析

React 类组件源码浅析

React

Detailed analysis of class components in React, covering Fiber node creation, instance creation and updates, scheduling updates, component lifecycles, and commit phases.

Read more about React 类组件源码浅析

useEffect和useLayoutEffect源码浅析

React

Analysis of the source code for useEffect and useReducer in React 17.0.1, focusing on how effects are created and handled in function components.

Read more about useEffect和useLayoutEffect源码浅析

useState和useReducer源码浅析

React

React v17.0.1 source code analysis of synchronous application creation with ReactDOM.render, focusing on Hooks and updating state.

Read more about useState和useReducer源码浅析

浅析React中Mount时Fiber树的创建流程

React

Description of ReactDOM.render mount process, focusing on Fiber nodes' operations including beginWork and completeWork functions in React 17.0.1.

Read more about 浅析React中Mount时Fiber树的创建流程

利用Formik解决表单痛点

JavaScriptReact

Comparison of form handling in jQuery, ant design (for back-end), and Formik in React, with examples and recommendations.

Read more about 利用Formik解决表单痛点

总结自己使用过的Hooks数据流方式

React

Sharing experiences with React Hooks data flow methods, including useState, useReducer, useContext + useReducer, unstated-next, and UmiJS useModel. Mentions on React-Redux and DvaJS.

Read more about 总结自己使用过的Hooks数据流方式

Create React App v3 学习笔记

React

Update on Create React App v3 features, including custom templates, package management options, automatic code formatting, environment variables, Sass support, CSS Modules, HTTPS, and absolute component path settings.

Read more about Create React App v3 学习笔记

React-Redux 源码阅读笔记

JavaScriptReact

Description a detailed analysis of react-redux, explaining the principles of Provider, connect, and Subscription, offering insights and queries on connectAdvanced functionality.

Read more about React-Redux 源码阅读笔记