react重要知识点（面经）

最新推荐文章于 2024-11-30 19:42:24 发布

原创

最新推荐文章于 2024-11-30 19:42:24 发布 · 419 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

react重要知识点（面经）

react生命周期

class

hooks

redux

redux 核心概念



// 创建Store容器
    const store = Redux.createStore(reducer)
    // 创建用于处理状态的reducer函数
    function reducer ( state = initialState, action ) {
   
   }
    // 获取状态
    store.getState();
    // 订阅状态同步视图
    store.subscribe(function () {
   
   })
    // 触发action
    store.dispatch({
   
    type: 'description' })

redux 计数器案例

// 3. 存储默认状态
    var initialState = {
   
   
      count: 0
    }
    // 2. 创建 reducer 函数，接受两个参数第一个为接受的默认状态，第二个参数接受action
    function reducer (state = initialState, action) {
   
   
      switch (action.type) {
   
   
        case 'increment':
          return {
   
   count: state.count + 1};
        case 'decrement':
          return {
   
   count: state.count - 1}
        default:
          return state;
      }
    }
    // 1. 创建 store 对象，它可以传入两个参数，第一个为reducer改变state的方法，第二个为默认参数
    var store = Redux.createStore(reducer);
 
    // 4. 定义 action 描述要进行怎样的操作，type是一个自定义的字符串
    var increment = {
   
    type: 'increment' };
    var decrement = {
   
    type: 'decrement' };
 
    // 5. 获取按钮 给按钮添加点击事件
    document.getElementById('plus').onclick = function () {
   
   
      // 6. 触发action 用dispatch方法触发action，dispatch方法存放在store实例里
      store.dispatch(increment);
    }
 
    document.getElementById('minus').onclick = function (