React踩坑笔记 —— React

最新推荐文章于 2024-09-13 16:58:04 发布

置顶 qq_32331073

最新推荐文章于 2024-09-13 16:58:04 发布

阅读量5.8k

点赞数

分类专栏： ReactJS 文章标签： React异常 ES6 JSX React如何使用社区组件 Component

本文链接：https://blog.csdn.net/qq_32331073/article/details/84562186

版权

ReactJS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

                    
                    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来判断执行路径，如果这种type的action不会影响subReducer对应的state.key，那么一定要直接返回该state.key。