1. Understand the role of Virtual DOM and key attributes
-
JSX
Operating basis,Virtual DOM
-
Virtual
DOM
work as follows:
- Breadth first stratified comparison
- The root node starts to compare
- Attribute changes and order
- Node type changes
- Nodes move across layers
- Virtual
DOM
two assumptions, as follows:
- The component
DOM
structure is relatively stable - Sibling nodes of the same type can be uniquely identified
2. Component design mode, high-level components and functions as sub-components
-
The other two forms of component reuse, higher-order components and functions as sub-components
-
High-level components
HOC
, high-level components accept components as parameters and return new components -
As a function of sub-assembly, a component
render
content, determined by a user -
Both high-level components and function sub-components are design patterns, which can achieve component reuse in more scenarios
Three, understand the new Context API and its usage scenarios
React 16.3
The new feature isContext API
used to solve the communication between components.provide
Is the root node, is the node thatconsume
uses it, andContext
is the global successor
Fourth, use scaffolding tools to create React projects
- Created using scaffolding tool
React
applications,Create React App,Codesandbox,Rekit
Five, packaging and deployment
- Why do you need to package, as follows:
- Compiler
ES6
syntax features, compilationJSX
- Integrate resources, such as pictures,
Less/Sass
- Optimize code size
- Packing considerations are as follows:
- Setting
nodejs
environmentproduction
- Disable development-specific code, such as
logger
- Set the application root path