react Foundation

JSX

• JSX is a JavaScript grammar extension that can well describe the essential form of interaction that UI should present.
• React DOM escapes by default before rendering all input content. It ensures that your application will never inject content that is not explicitly written by you. All content is converted into strings before rendering.
• class in JSX becomes className

element

• Elements are the smallest bricks that make up React applications.
• React elements are common objects with minimal overhead. React DOM is responsible for updating DOM to align with React elements.
• Components are made up of elements.

assembly

Component names must begin with uppercase letters (React treats components starting with lowercase letters as native DOM tags)

• Function components:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

• class component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

props

When a React element is a user-defined component, it converts attributes received by JSX into a single object that is passed to the component, called "props". Components must never modify their props, whether they use function declarations or class declarations

// This code renders "Hello, Sara" on the page.
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

//What happened when the previous code was rendered:
  1. We call ReactDOM.render() Function, and pass in <Welcome name="Sara" /> As a parameter.
  2. React call Welcome Components, and {name: 'Sara'} Act as props Input.
  3. Welcome Components will <h1>Hello, Sara</h1> Elements are used as return values.
  4. React DOM take DOM Update efficiently to <h1>Hello, Sara</h1>. 

State

• Use this.setState() to set the value of state
• this.setState() may be asynchronous
• When this.setState() is called, React merges the objects you provide into the current state.

data stream

Reaction is a one-way data flow, and any state always belongs to a specific component, and any data or UI derived from that state can only affect components "below" them in the tree.

life cycle

Fiber mechanism is introduced in V16 version. This mechanism affects part of the life cycle to a certain extent, and also introduces two new API s to solve the problem. Fiber is essentially a virtual stack frame. The new scheduler schedules these frames freely according to their priority, thus changing the previous synchronous rendering to asynchronous rendering, and calculating updates in segments without affecting the experience. In previous versions, if you had a very complex composite component and then changed the state of the top component, the call stack could be very long, the call stack would be too long, and the complex operation in the middle would lead to long blocking of the main thread and bring bad user experience. Fiber was born to solve this problem.

class ExampleComponent extends React.Component {
  // Used to initialize state
  constructor(props) {
    super(props)
    this.state = { hasError: false };
  }

  // Used to replace `component WillReceive Props', which is called when initialized and `update'.
  // Because the function is static, you can't get `this'.`
  // If you need to compare `prevProps', you need to maintain it separately in `state'.
  static getDerivedStateFromProps(nextProps, prevState) {}

  // Determine whether components need to be updated, mostly for component performance optimization
  shouldComponentUpdate(nextProps, nextState) {}

  // Call after component mounts
  // Requests or subscriptions can be made in this function
  componentDidMount() {}

  // Used to replace component WillUpdate, which is called before DOM updates after update
  // Used to read the latest DOM data.
  getSnapshotBeforeUpdate() {}

  // Components are about to be destroyed
  // Subscriptions, timers, etc. can be removed here
  componentWillUnmount() {}

  // Call after Component Destruction
  componentDidUnMount() {}

  // Component Update Call
  componentDidUpdate() {}

  // Error Boundary - Rendering the Standby UI
  // Update state to enable the next rendering to show the degraded UI
  // Note that error boundaries capture only the errors of their subcomponents, and they cannot capture their own errors.
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  // Error Boundary - Print Error Information
  // You can also report the error log to the server
  // Note that error boundaries capture only the errors of their subcomponents, and they cannot capture their own errors.
  componentDidCatch(error, info) {
    console.log(error, info);
  }

  // Rendering Component Functions
  render() {}

  // The following functions are not recommended
  UNSAFE_componentWillMount() {}
  UNSAFE_componentWillUpdate(nextProps, nextState) {}
  UNSAFE_componentWillReceiveProps(nextProps) {}
}

For asynchronous rendering, there are two stages of rendering: reconciliation and commit. The former process can be interrupted, while the latter can not be paused, and the interface will be updated until it is completed.

• Reconciliation phase:

  • componentWillMount
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate

• Commit phase:

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount

Because the reconciliation phase can be interrupted, life cycle functions that are executed during the reconciliation phase may be called multiple times, causing Bug. So for several functions called in the reconciliation phase, you should avoid using them except shouldComponentUpdate.

event processing

• React events are named in camelCase instead of lowercase.
• When using JSX grammar, you need to pass in a function as an event handler, not a string.

Several ways to bind this for time in JSX:

• Builder internal processing:

constructor() {
  this.handleClick = this.handleClick.bind(this);
}

• Using bind in JSX:

<button onClick={this.handleClick.bind(this, id)}>Delete Row</button>

• Arrow function:

<button onClick={() => this.handleClick(id)}>Delete Row</button>

key

key helps React identify which elements have changed, such as being added or deleted. So you should assign a definite identifier to each element in the array.
key is only necessary to be unique between sibling nodes

Controlled components

Make React's state "the only data source". The React component that renders the form also controls what happens to the form during user input. Form input elements controlled by React in this way are called controlled components.

Advanced

redux-adcanve

Original git address If it's helpful, star t and keep updating.