Summary of React knowledge points (two)

Summary of React knowledge points (two)

1. Why is it better not to use index for the key of the list loop rendering?

Example:
The value of the array before the change is [1,2,3,4], and the key is the corresponding subscript: 0,1,2,3 The value of the array after the change is [4,3,2,1], and the key corresponds to The subscript of is also: 0, 1, 2, 3

Because the key is the same but the value is different, delete and add operations will be performed. However, if the mobile operation can be performed originally, the delete and add operations obviously consume more performance.

Second, what is Context?

Context provides a method for data transfer between component trees without manually adding props for each layer of components .

// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context（“light”为默认值）。
const ThemeContext = React.createContext('light');
class App extends React.Component {
    
    
  render() {
    
    
    // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
    // 无论多深，任何组件都能读取这个值。
    // 在这个例子中，我们将 “dark” 作为当前的值传递下去。
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar() {
    
    
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
    
    
  // 指定 contextType 读取当前的 theme context。
  // React 会往上找到最近的 theme Provider，然后使用它的值。
  // 在这个例子中，当前的 theme 值为 “dark”。
  static contextType = ThemeContext;
  render() {
    
    
    return <Button theme={
    
    this.context} />;
  }
}

1. Create the createContext object

2. Wrap the component to get the value with Context.Provider

3. Set in the component to static contextType = ThemeContext;use this.contextaccess

Three, controlled components and uncontrolled components

1. Controlled components

• The only data source for rendering the component is the State in the component
• This component is also responsible for the operations that need to be performed when the data changes

As <input>, <textarea>and <select>has a valueproperty used to set the current value.

2. Uncontrolled components

The form data will be processed by the DOM node and can be refused to obtain the value of the form element.

Four, React Portal

Portal ==> "Portal". Provides an excellent solution for rendering child nodes to DOM nodes that exist outside of the parent component .
Purpose: If you want to make a Dialog dialog box, you want the dialog box to be centered, but writing the dialog box component in a fixed position is easy to be affected by the CSS style of the parent component, so you can send the dialog box component to the specified position through the Portal.

use:

import React from 'react';
import {
    
    createPortal} from 'react-dom';

class Dialog extends React.Component {
    
    
  constructor() {
    
    
    super(...arguments);

    const doc = window.document;
    this.node = doc.createElement('div');
    doc.body.appendChild(this.node);
  }

  render() {
    
    
    return createPortal(
      <div class="dialog">
        {
    
    this.props.children}
      </div>, //塞进传送门的JSX
      this.node //传送门的另一端DOM node
    );
  }

  componentWillUnmount() {
    
    
    window.document.body.removeChild(this.node);
  }
}