• Webpack provides its own import method require.include, but it also supports the CommonJS or AMD require syntax, while Node.js uses common.js. ES6 syntactic Import is also converted by Babel to CommonJS or AMD format.
  • ES6, CommonJS import is singleton;
  • Single-page apps load all directly by defaultimportSo:
    • Global calls and expressions in JS are always executed at first, and can be loaded dynamically and on demand using require()/import() syntax. Can cooperate with Lazy Lazy loading (https://reactjs.org/docs/code-splitting.html#reactlazy) to realize the React components – Lazy principle that Promise + high order component, Assign the parse value to the global object after the component finishes loading asynchronously.
    • CSS styles may be overwritten.
  • React: events/styles/selectors belong only to real DOM elements. Components are eventually rendered as real DOM elements.
  • When reusing a community or custom component, if the component does not provide Hooks for the Style configuration, we can use the browser debugging tool to find the selector for the specified element and override the previous Style.
  • Components are updated when the Props and State are changed. For details on how to update components, see the Difference Algorithm.
  • Component lifecycle: Mount and unload occurs when the page loads and routes, and update occurs when Props or State changes;
  • Controlled components:A stateful element like a form element that gives control of its state to React is called a controlled component. A controlled component must satisfy two conditions: ② The state is controlled by React (explicit value property). So if you want to give default values without making form elements a controlled component, usedefaultValueGive default values;
  • JS files using JSX syntax must be importedReact —- import React from 'react';
  • {}Similar to eval(), template engines, JS` `Template variables, firstperform(execute an expression or call in the template)Apply colours to a drawingRender the result of an expression run, so be careful{}What is needed infunctionorFunction call ().
  • Compiling in a browser using node.js (server) packages will cause an error, so innpm installPay attention to the environment in which the package is used.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.Function is invalid as a React subfunction. If fromrender propsIn return{Component}Rather than<Component />, this may happen. Maybe you want to call this function instead of returning it.
  • React.Children.only expected to receive a single React element child., a component can pass throughPropTypesDo type checking to limit the type of the attribute 
    MyComponent.propTypes = {
 children: PropTypes.element.isRequired
};
Copy the code
  • inreduxThe use ofcombineReducersNotice how this works — something like this:General implementation: 
    const chatReducer = (state = defaultState, action = {}) = > {
return {
   chatLog: chatLog(state.chatLog, action),
   statusMessage: statusMessage(state.statusMessage, action),
   userName: userName(state.userName, action)
  }
};
Copy the code

    CombineReducers implementation

    const combineReducers = reducers= > {
return (state = {}, action) = > {
  return Object.keys(reducers).reduce(
    (nextState, key) = > {
      nextState[key] = reducers[key](state[key], action);
      returnnextState; }, {}); }; };Copy the code

    It doesn’t matter which attribute it’s split forThe child reducerAnd in anydispatchWhen it happens, it will be executed, so definesubReducerWhen paying attention to the internal basisaction.typeTo determine the execution path, if thistypetheactionDoes not affect thesubReducerThe correspondingstate.key, then be sure to return that directlystate.key.