The difference between the yarn and npm
yarn advantages:
- high speed
- Parallel installation
- Offline mode
- Installation unified version
- More concise output
- Multi-source registration process
- Better semantic
yarn.lock
yarn.lock will record specific version numbers of all the big and small packages you have installed. As long as you do not delete yarn.lock file, when you run the yarn install again, gets all of which depend on the package according to the version number of the record. You can yarn.lock submitted to the repository so that other colleagues to check out the code and run the yarn install, you can ensure that you install depends are exactly the same.
Virtual DOM is really faster than the native DOM operations it? Talk about your ideas
Virtual DOM DOM is used to simulate an object, the object has a number of important properties, and update the UI mainly by comparison (DIFF) to complete the difference between the old and the new virtual virtual DOM tree DOM tree.
- Redraw performance innerHTML vs. Virtual DOM consumption:
innerHTML: render html string O (template size) + recreate all DOM elements O (DOM size)
Virtual DOM: render Virtual DOM + diff O (template size) + DOM necessary updates O (DOM change)
Virtual DOM render + diff is clearly slower than the rendering html string, but! It remains to calculate pure js level, compared to the back of the DOM manipulation, is still much cheaper. You can see, innerHTML of the total amount of computation to calculate whether or js and DOM operations are related to the size of the entire screen, but the calculation of the amount of Virtual DOM inside, only js computing and interface related to the size, and DOM manipulation is related to the amount of variable data of. I said earlier, and compared with DOM manipulation, js computing is extremely cheap. This is why we need Virtual DOM: it ensures that 1) no matter how much your data changes, redraw each performance are acceptable; 2) you can still use a similar idea to innerHTML write your application.
Virtual DOM order to improve performance of a small amount of data updates need targeted optimization, or immutable data such shouldComponentUpdate
Virtual DOM real value is never a performance, but it is 1) opens the door for the functional UI programmatically; 2) can be rendered to the backend than the DOM, such as ReactNative.
The benefits of using react
- Virtual DOM, improve performance
- Componentization
- Unidirectional data flow (the data flow more clearly, more controllable state of the component;)
redux and defects
redux designed with the following points:
- state is the singleton and immutable, singleton pattern to avoid the complexity of the data exchange between different store without variable data provide a very quick undo redo, "time travel" and other functions.
- state can only be updated through reducer, it can not be modified directly.
- function reducer must be pure, the form (state, action) => newState
react-redux mainly consists of two parts.
- Provider component: store may be injected into cotext subassembly, it is generally on the topmost application.
- connect function: returns a higher order function, the context by the Provider store injected taken out and transferred to the subassembly by The props, so that the subassembly can store the acquired successfully.
Shortcoming
- 1. Excessive boilerplate Code:
- 2. Update efficiency: the use of immutable data model, each state is required to update a copy of the complete state resulting in a waste of memory and loss performance. (With immutable resolve)
- 3. The data transfer efficiency: Since legacy context API react-redux adopted, context transfer efficiency exist.
react hook
Hook provides a more direct API: props, state, context, refs and lifecycle
useState will return a pair of values: a current status and allows you to update its function
const [count, setCount] = useState(0);
useEffect it with class components componentDidMount, componentDidUpdate and componentWillUnmount have the same purpose, but are merged into a API.
// 相当于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 使用浏览器的 API 更新页面标题
document.title = `You clicked ${count} times`;
});
复制代码useEffect can achieve a variety of different side effects after the component rendering. Some side effects may need to be cleared, so the need to return to a function:
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
<!--返回-->
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
复制代码rule
- Hook only at the top level
- Hook called only function in React
react Performance Optimization
- Use of production versions
- webpack package
- showComponentUpdate
- Use immutable data
react the component lifecycle
Short version
Mounting
When the component instance is created and inserted into the DOM, its life cycle calling sequence as follows:
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
Update
When the props or state assembly changes will trigger an update. Component update life cycle calls in the following order:
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
If shouldComponentUpdate () returns false, it does not call the render ().
Uninstall
componentWillUnmount()
Error Handling
When the constructor rendering process, life cycle, or subassembly throw an error, it calls the following method:
static getDerivedStateFromError() componentDidCatch()
getDerivedStateFormProps
Substituted componentWillReceiveProps (). This hook is to get from props to state the value.
getSnapshotBeforeUpdate(prevProps,prevState)
getSnapshotBeforeUpdate () once rendered output in recent (submitted to the DOM node) before calling. It makes the assembly to entrap some of the information (e.g., scroll positions) from the DOM before changes. Any value returned by this life cycle passed as an argument to componentDidUpdate ().
This usage is not common, but it may appear in the UI process, if necessary, in a special manner such as chat thread rolling position.
Snapshot should return a value (or null).
constructor()
- state value is initialized
- super (props) otherwise it will error
- Examples of event bindings
react diff
React diff through the development of a bold strategy to convert the problem complexity O (n3) to question (n) complexity O;
- DOM nodes across mobile operating exceptionally low levels
- Component generates the same class similar tree structure, different types of components to generate different tree structure
- A set of child nodes of the same level, can be distinguished by a unique id tree diff component diff element diff
React stratified by divergent strategies of the tree diff algorithm optimization;
React similar tree structure generated by the same class, different policies for different classes to generate a tree structure, for optimization of the component diff;
React strategy by setting a unique key for element diff algorithm optimization;
He suggested that, in the development of components, stable DOM structure will help to improve performance;
He suggested that in the development process, to minimize similar to the last node moves to the head of the list of operations, when the number of nodes is too large or too frequent update operations, to a certain extent influence the rendering performance of React. zhuanlan.zhihu.com/p/2034637
Load-demand with webpack
After AntDesign produced babel-plugin-import plug installed above, in .babelrc
Vue react and the difference
- react unidirectional data flow, vue bidirectional data flow
- In React application, when the status of a component changes, it will root for the component, sub-assembly re-render the entire tree. In Vue applications, dependent components are automatically tracked in the rendering process, so the system can accurately know which components do need to be re-rendered.
Server rendering, next.js
Server rendering: rendering process on the server side, eventually rendering the resulting HTML page sent to the client via HTTP protocol. For the clients, only to see the final HTML page, and not the data, do not see the template.
- advantage
- It is easy to SEO, the first screen to load faster because the client receives a complete HTML page - shortcomings
- Consuming back-end resources. Cost flow, even if the changes in the local pages also need to resend the entire page
The client rendering: server-side template and sends data to the client, the rendering process is completed on the client.
- advantage
- Saving back-end resources, partial page refresh, rendering many-fold, separating the front and rear end
- Shortcoming
- Poor first screen performance, black and white, you can not (or difficult) for SEO
The advantages of server-side rendering is shortcomings, the server render the shortcomings of the client but also the client rendering rendered advantage, and vice versa
Next.js do is isomorphic rendering. The same set of code either on the server side rendering, can be rendered on the client. Exciting When we first visited, in other words when we visit first screen page, Next.js use server-side rendering, returns the final HTML page has been rendered for us. This is a blank screen while addressing the first question and SEO issues. After that when we interact again, use a client rendering. HTML, CSS, JS and other resources do not need to re-request, only you need to get data through ajax / websocket other ways to complete the rendering process on the client.
context
Context is designed to share those is a "global" data for a component tree, such as the current authenticated user, topic or preferred language. Context is provided a method without the addition of a manual props each component, the data can be transferred between the components of the tree.
- provider, props producer
- consumers, consumer prover provided value
const ThemeContext = React.createContext('light'); //创建context，设置默认值
复制代码react-router in the <Link> tag and label what is the difference <a>
The "jump" behavior will trigger matches the corresponding update page content without refreshing the entire page. The label is an ordinary hyperlink, the page for the jump from the current href pointing to another page (non-anchor case).Reproduced in: https: //juejin.im/post/5cee29b7f265da1b8b2b40ca