深入 React 技术栈 - 陈屹

全面讲述 React 技术栈的第一本原创图书，pure render 专栏主创倾力打造。覆盖 React、Flux、Redux 及可视化，帮助开发者在实践中深入理解技术和源码。前端组件化主流解决方案，一本书玩转 React"全家桶"。

关于作者

陈屹 是前端领域的实践者和分享者：

• pure render 专栏主创：分享 React 技术栈的深入理解
• 前端社区活跃贡献者：在 React 技术引入和推广阶段贡献了大量中文资料
• 实践派开发者：注重将技术理论与实践应用相结合

核心内容

1. React 基础与组件化

// 组件的生命周期
class MyComponent extends React.Component {
    componentDidMount() {
        // 组件挂载后执行
    }

    componentDidUpdate(prevProps, prevState) {
        // 组件更新后执行
    }

    componentWillUnmount() {
        // 组件卸载前执行
    }

    render() {
        return <div>{this.props.name}</div>;
    }
}

2. Flux 架构模式

// Action Creator
const TodoActions = {
    add(text) {
        Dispatcher.dispatch({
            type: ActionTypes.ADD_TODO,
            text
        });
    }
};

// Store
class TodoStore extends EventEmitter {
    constructor() {
        super();
        this.todos = [];
        Dispatcher.register(this.handleActions.bind(this));
    }

    handleActions(action) {
        switch(action.type) {
            case ActionTypes.ADD_TODO:
                this.todos.push(action.text);
                this.emit('change');
                break;
        }
    }
}

3. Redux 状态管理

// Reducer
function todos(state = [], action) {
    switch (action.type) {
        case 'ADD_TODO':
            return [...state, action.text];
        case 'REMOVE_TODO':
            return state.filter((_, index) => index !== action.index);
        default:
            return state;
    }
}

// Action Creator
function addTodo(text) {
    return { type: 'ADD_TODO', text };
}

// 使用 Redux
const store = createStore(todos);
store.dispatch(addTodo('Learn React'));

4. 高阶组件 (HOC)

// 高阶组件示例
function withLogging(WrappedComponent) {
    return class extends React.Component {
        componentDidMount() {
            console.log('Component mounted');
        }

        render() {
            return <WrappedComponent {...this.props} />;
        }
    };
}

// 使用
const EnhancedComponent = withLogging(MyComponent);

读书心得

《深入 React 技术栈》作为国内早期 React 技术的原创图书，在 React 生态快速演进的时期为开发者提供了系统的学习路径。书中对 Flux 和 Redux 的讲解尤为清晰，帮助读者理解了单向数据流的核心思想。

虽然书中部分 API 已随 React 版本更新而有所变化（如生命周期的变更、Hooks 的引入），但其对组件化思想和状态管理的阐述仍具参考价值。对于理解 React 的设计理念和掌握前端组件化开发方法，这是一本值得阅读的入门书籍。