React踩坑笔记 —— React

  • Webpack提供了自己的导入方式require.include,但同时也支持commonjs规范或AMD规范的require语法,而Node.js使用的就是common.js,ES6的语法Import也会被Babel转化成commonjs格式或者是AMD格式。
  • ES6、CommonJS的导入是单例的;
  • 单页应用默认直接加载出所有import的资源,所以:
    • JS中的全局调用和表达式总会一开始就被执行,可以使用require()/import()语法实现动态加载、按需加载。可以配合Lazy(https://reactjs.org/docs/code-splitting.html#reactlazy)实现React组件懒加载 —— Lazy的原理即Promise+高阶组件,在组件异步加载完成后将解析值赋值给全局对象。
    • CSS样式可能会被覆盖。
  • 一句话理解react:事件\样式\选择器,只属于真实的DOM元素,Components最终被渲染成真实DOM。
  • 在重用社区自定义组件的时候,如果组件没有给出样式配置的钩子(Hooks),那么我们可以在浏览器调试工具中,先找出指定元素的选择器,然后去覆盖先前样式(Style)。
  • 在Props和State发生改变的时候,组件会发生更新,至于如何被更新,可以查看“差分算法”
  • 组件生命周期: 挂载、卸载发生在页面加载和路由,更新发生在Props或State改变后;
  • 受控组件: 像表单元素这样的,有状态,并将状态控制权交给React的元素称为受控组件,受控组件必须满足两个条件:① 表单元素;② 状态被React控制(显式的value属性)。所以如果你又想给出默认值又不想将表单元素变成受控组件,请使用defaultValue给出默认值;
  • 使用JSX语法的JS文件必须导入React ---- import React from 'react';
  • {}类似于eval()、模板引擎、JS``模板变量,先执行(执行模板中的表达式或调用)再渲染(将表达式运行的结果渲染出来),所以要特别注意{}中需要的是函数还是函数调用()
  • 使用Node.js(服务端)的包在浏览器编译,会发生错误, 所以在npm install时要注意包的使用环境。
    Failed to compile
    Module not found: Can't resolve 'XXX' in 'xxx.lib' 在这里插入图片描述
  • Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    函数作为React子函数无效。 如果从render props中返回{Component}而不是<Component />,则可能会发生这种情况。 或许你打算调用这个函数而不是返回它。
  • React.Children.only expected to receive a single React element child.,某个组件可以通过PropTypes作类型检查,限制属性类型
    MyComponent.propTypes = {
     children: PropTypes.element.isRequired
    };
    
  • redux中使用combineReducers时要注意其实现原理 —— 类似于如下代码:
    一般实现:
    
         
         
          
          const
         
          
         
         
          
          chatReducer
         
          = (state = defaultState, action = {}) => {
    
         
         
          
          return
         
          {
       chatLog: 
         
         
          
          chatLog
         
         (state.chatLog, action),
       statusMessage: 
         
         
          
          statusMessage
         
         (state.statusMessage, action),
       userName: 
         
         
          
          userName
         
         (state.userName, action)
      }
    };
    
    combineReducers实现
    
         
         
          
          const
         
          
         
         
          
          combineReducers
         
          = reducers => {
    
         
         
          
          return
         
          (state = {}, action) => {
      
         
         
          
          return
         
          Object.
         
         
          
          keys
         
         (reducers).
         
         
          
          reduce
         
         (
        (nextState, key) => {
          nextState[key] = reducers[key](state[key], action);
          
         
         
          
          return
         
          nextState;
        },
        {} 
       );
     };
    };
    
    无论是针对哪个属性拆分出来的子reducer,在任意dispatch发生时,都会被执行,所以定义subReducer时要注意在内部根据action.type来判断执行路径,如果这种typeaction不会影响subReducer对应的state.key,那么一定要直接返回该state.key
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值