The fork by github.com/sudheerj/re… Is the translation of the links above, but also deepen their understanding of part + complement (italics) continuously updated: www.yuque.com/3crazyone/c…

The React core

1. What is React

Is an open source JavaScript library for building user pages, especially single-page applications, focusing on the view layer of Web and mobile applications. Originally developed by Facebook engineer Jordan Walke, it was first used in Facebook’s newsfeed in 2011 and first applied to Instagram in 2012.

2. What are the main features of React

• Use virtual DOM instead of real DOM to reduce DOM operation overhead
• Follow one-way data flow/data binding
• Develop views using reusable/composable UI components
• Support for server-side rendering

3. What is JSX

JSX is an ECMAScript-based xmL-class syntax extension that provides syntactic sugar for the react.createElement () function so it can be developed in JAVASCRIPT using HTML templates that are easier to understand.

In the example below, the text inside the

tag is returned to the Render function as a JavaScript function.

class App extends React.Component {
  render() {
    return(
      <div>
        <h1>{'Welcome to React world! '}</h1>
      </div>)}}Copy the code

What is the difference between an Element and a Component

The element is a plain object that describes what you want to display on the screen, based on a DOM node or other component. An element can contain other elements in its props. Creating a React element is simple. Once an element is created, it does not change.

The React element’s object looks like this:

const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)
Copy the code

React.createElement returns an object:

{
  type: 'div'.props: {
    children: 'Login'.id: 'login-btn'}}Copy the code

Finally, it renders to the DOM using reactdom.render () :

<div id='login-btn'>Login</div>
Copy the code

Components can be declared in several different ways. It can be a class with the Render () method. Or, in simple cases, you can define it as a function. In both cases, it accepts props as input and returns a JSX structure as output

const Button = ({ onLogin }) =>
  <div id={'login-btn'} onClick={onLogin}>Login</div>
Copy the code

JSX is then converted to one via react.createElement () :

const Button = ({ onLogin }) = > React.createElement(
  'div',
  { id: 'login-btn'.onClick: onLogin },
  'Login'
)
Copy the code

5. How to create a component

There are two ways to create a component:

• Functional components: This is an easy way to create components. Just like a simple JS function, it takes props as the first argument and returns the React element:

function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>

}
Copy the code

• Class component: You can also define a component using ES6 class syntax sugar, and the above function component is written in class component:

class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>}}Copy the code

6. When to use class components instead of function components

Use class components if components need to use state or lifecycle methods, otherwise use function components. However, React 16.8 includes hooks, so function components can use state, lifecycle and other features as well.

7. What is Pure Component

React.purecomponent is the same as react.componentexcept that it handles shouleComponentUpdate() when the props or state is changed, The PureComponent makes a shallow comparison between props and state. Component, on the other hand, does not compare the current props and state with the next update. Therefore, every time shouldComponentUpdate is called, the component will be rerendered by default.

8. What is the React state

A component’s state is an object that contains some information that can change during the lifetime of the component. We should make state as simple as possible and reduce the number of components that have state. Let’s create a user component with message status:

class User extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      message: 'Welcome to React world'
    }
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>)}}Copy the code

9. What are the React props

Props is the input to the component. They are a single value or object containing a set of values that are passed to the component when created using a naming convention similar to the HTML-tag attribute. They are data passed from parent to child components.

The main purpose of the Props in React is to provide the following component functions:

• Pass custom data to the component.
• Trigger a state change.
• In the render() method of the component, using this.props.

For example, let’s create an element and give it a reactProp property:

<Element reactProp={'1'} / >Copy the code

The reactProp will then become a property attached to the React native Props object, which originally existed on all components created using React.

props.reactProp
Copy the code

10. What is the difference between state and props

Prop and state are plain JS objects. Although they both have information that affects the rendered output, they differ in their component-wise functionality. Props is passed to the component as an argument to a function, and state is managed within the component like variables declared in a function.

11. Why not update state directly

Updating State directly as follows does not trigger component rerendering

this.state.message = 'Hello world'
Copy the code

You need to update the state object with setState, and when state changes, the component is rerendered

this.setState({ message: 'Hello World' })
Copy the code

12. What is the purpose of using callback functions as arguments in setState

The callback function is executed after the setState execution is complete and the component has finished rendering. Since setState is executed asynchronously, the callback function can be used as a subsequent operation after a state update.

Note: It is recommended to use the lifecycle method instead of this callback function.

setState(
  { 
    name: 'John'}, () = >console.log('The name has updated and component re-rendered'))Copy the code

What is the difference between the HTML event binding and the React event binding

• In HTML, binding event names should be all lowercase:

<button onclick='activateLasers()'>
Copy the code

• React uses a small hump:

<button onClick={activateLasers}>
Copy the code

• In HTML, you can use return false to prevent the default behavior:

<a href=The '#' onclick='console.log("The link was clicked."); return false; ' />
Copy the code

• PreventDefault must be used in React

function handleClick(event) {
  event.preventDefault()
  console.log('The link was clicked.')}Copy the code

• In HTML, you’re supposed to use functions with a () after the function name, but in React you don’t,See also the previous example. HTML uses strings, while React uses {}.

_

14. How do I bind methods and event handling in JSX

There are 3 ways to do this:

• Bind a Constructor: In JS classes, methods are not bound by default. The same goes for the class components used to construct React. Usually we bind them in constructors

class Component extends React.Componenet {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    // ...}}Copy the code

• Use arrow functions: You can define public methods using arrow functions or add anonymous functions directly to JSX objects instead of using bind

handleClick = () => { console.log('this is:', this) } <button onClick={this.handleClick}> {'Click me'} </button> <button onClick={(event) => this.handleClick(event)}>  {'Click me'} </button>Copy the code

15. How to bind event or callback function data pass parameter

You can use arrow functions to bind wrapped events and pass parameters

<button onClick={() => this.handleClick(id)} />
Copy the code

You can also use bind

<button onClick={this.handleClick.bind(this, id)} />
Copy the code

Or you can use higher-order functions

handleClick = (id) = >() = > {console.log("Hello, your ticket number is", id)
};

<button onClick={this.handleClick(id)} />
Copy the code

15. How to bind event or callback function data pass parameter

You can use arrow functions to bind wrapped events and pass parameters

<button onClick={() => this.handleClick(id)} />
Copy the code

You can also use bind

<button onClick={this.handleClick.bind(this, id)} />
Copy the code

Or you can use higher-order functions

handleClick = (id) = >() = > {console.log("Hello, your ticket number is", id)
};

<button onClick={this.handleClick(id)} />
Copy the code

17. What is an inline conditional expression

You can conditionally render expressions using if statements or ternary expressions. You can also embed any expression in JSX by wrapping it in curly braces and then using JS logical operators such as && :

<h1>Hello!</h1>
{
    messages.length > 0 && !isLogin?
      <h2>
          You have {messages.length} unread messages.
      </h2>
      :
      <h2>
          You don't have unread messages.
      </h2>
}
Copy the code

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
)
Copy the code

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
)
Copy the code

19. What are refs for

Ref is used to return a reference to an element. They should be avoided in most cases, but can be useful if you need direct access to an instance of a DOM element or component.

const MyComponent = (a)= > {
	const myRef = useRef()
  
  return <div ref={this.myRef} /> // use myRef.current
}
Copy the code

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  render() {
    return}}Copy the code

class SearchBar extends Component {
   constructor(props) {
      super(props);
      this.txtSearch = null;
      this.state = { term: ' ' };
      this.setInputSearchRef = e= > {
         this.txtSearch = e;
      }
   }
   onInputChange(event) {
      this.setState({ term: this.txtSearch.value });
   }
   render() {
      return (
         <input
            value={this.state.term}
            onChange={this.onInputChange.bind(this)}
            ref={this.setInputSearchRef} />); }}Copy the code

21. What are forward refs

Ref Forwarding is a new feature that allows some components to receive the Refs they receive and pass them on to child components, simply passing the Refs through _

const ButtonElement = React.forwardRef((props, ref) = > (
  <button ref={ref} className="CustomButton">
    {props.children}
  </button>
));

// Create ref to the DOM button:
const ref = React.createRef();
<ButtonElement ref={ref}>{'Forward Ref'}</ButtonElement>
Copy the code

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this).scrollIntoView()
  }

  render() {
    return <div />}}Copy the code

class MyComponent extends Component {
  constructor(props){
    super(props);
    this.node = createRef();
  }
  componentDidMount() {
    this.node.current.scrollIntoView();
  }

  render() {
    return <div ref={this.node} />}}Copy the code

23. Why string Refs are abandoned (need to be perfected)

Those of you who have used React before will know an older API where the ref attribute is a string, such as ref = {‘textInput’}, and the DOM node is accessed as this.refs.textinput. We recommend against this because string references have the following problems and are considered legacy issues. React V16 removes string references:

• Forcing React to keep track of what components are currently in use is problematic because it makes the React module stateful and therefore causes strange errors when copying the React module in bundles.
• Non-combinable – If a library has a ref added to the passed child, the user cannot add a ref to it. The refs of callbacks can be combined.
• They are not suitable for static analysis such as Flow. Flow cannot guess at the effect of the framework making the string ref appear on this.refs and its type (which may vary). Refs for callbacks are friendlier than static analysis.
• You can’t use the “render callback” mode that most people expect

class MyComponent extends Component {
  renderRow = (index) = > {
    // This will not work, ref will be added to DataTable instead of MyComponent
    return<input ref={'input-' + index} />; Return <input ref={input => this['input-' + index] = input} />; } render() { return <DataTable data={this.props.data} renderRow={this.renderRow} /> } }Copy the code

25. How does the virtual DOM work

The virtual DOM can be broken down into three simple steps

• Whenever any underlying data changes, the entire UI is recalculated and rendered in a virtual DOM representation

• Compute the difference between the previous DOM tree and the new DOM tree

• Once the calculation is complete, the actual DOM will update only the parts that need to be changed

27. What is React Fiber

Fiber is a new Reconciliation engine or re-implementation of the core algorithms in React V16. React Fiber aims to improve its applicability for animations, layouts, gestures, pauses, pauses, or reuse, and assigns priorities to different types of updates, as well as new?? Concurrency primitives??

29. What is a controlled component

A controlled component is a component that controls subsequent user input to the input element of the form, with a corresponding handler for each state change. As in the following example, we change all of our inputs to uppercase, which we use handleChange to control:

handleChange(event) {
  this.setState({value: event.target.value.toUpperCase()})
}
Copy the code

class UserProfile extends React.Component {
  constructor(props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.input = React.createRef()
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value)
    event.preventDefault()
  }

  render() {
    return( <form onSubmit={this.handleSubmit}> <label> {'Name:'} <input type="text" ref={this.input} /> </label> <input type="submit" value="Submit" /> </form> ); }}Copy the code

31. What is the difference between cloneElement and createElement

JSX uses the React.createelemen () function to transform the React element into an object and render it into the UI, while cloneElement is used to clone the element and pass the new props.

33. What are the different phases of the component life cycle

There are three distinct phases in the component life cycle

• Mounting: The component is ready to mount in the DOM. This phase includes the following methods for component initialization
  • constructor()
  • getDerivedStateFromProps()
  • render()
  • componentDidMount()
• Updating: During this phase, components are updated in two ways, receiving new props and Updating the state using setState() or forceUpdate(). This phase includes:
  • getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()
• Unmounting: The component is unmounted from the DOM in the final stage when it is no longer needed. This stage includes:
  • componentWillUnmount()

It’s worth knowing that React also has a concept of phases within it when applying changes to the DOM. They are separated as follows:

• Render: Components will Render without any side effects. This applies to Pure components, where React can pause, halt, or restart rendering.
• Pre-commit: Allow React to read the DOM via getSnapshotBeforeUpdate for a period of time before the component actually applies the changes to the DOM.
• Commit: React works with the DOM and performs the final life cycle separately: componentDidMount for installation, componentDidUpdate for updates, and componentWillUnmount for uninstallation.

The React lifecycle was changed after 16.3.

const EnhancedComponent = higherOrderComponent(WrappedComponent)
Copy the code

function HOC(WrappedComponent) {
  return class Test extends Component {
    render() {
      const newProps = {
        title: 'New Header'.footer: false.showFeatureX: false.showFeatureY: true
      }

      return <WrappedComponent {. this.props} {. newProps} / >}}}Copy the code

const {Provider, Consumer} = React.createContext(defaultValue)
Copy the code

38. What are the children passed in props

Children is a props(this.prop.children), which allows components to be passed as data to other components, just like any other props used. Components placed between components are passed to that component as child components. There are a number of methods available in the React API for this prop. These include

• React.Children.map
• React.Children.forEach
• React.Children.count
• React.Children.only
• React.Children.toArray

The simple usage is as follows:

const MyDiv = React.createClass({
  render: function() {
    return <div>{this.props.children}</div>
  }
})

ReactDOM.render(
  <MyDiv>
    <span>{'Hello'}</span>
    <span>{'World'}</span>
  </MyDiv>,
  node
)
Copy the code

<div>
  {/* Single-line comments(In vanilla JavaScript, the single-line comments are represented by double slash(//)) */}
  {`Welcome ${user}, let's play React`}
</div>
Copy the code

<div>
  {/* Multi-line comments for more than
   one line */}
  {`Welcome ${user}, let's play React`}
</div>
Copy the code

40. What does the constructor do when props is passed as a parameter to super

The subclass constructor cannot use this reference until the super() method is called. The same applies to ES6 subclasses. The main reason for passing the props argument to the super() call is so that this.props can be used in the child constructor. Pass props

class MyComponent extends React.Component {
  constructor(props) {
    super(props)

    console.log(this.props) // prints { name: 'John', age: 42 }}}Copy the code

Don’t pass props:

class MyComponent extends React.Component {
  constructor(props) {
    super(a)console.log(this.props) // prints undefined

    // but props parameter is still available
    console.log(props) // prints { name: 'John', age: 42 }
  }

  render() {
    // no difference outside constructor
    console.log(this.props) // prints { name: 'John', age: 42 }}}Copy the code

42. If you set state to a variable

If you use ES6 or Babel to transform JSX code, you can do this using the calculated property names.

handleInputChange(event) {
  this.setState({ [event.target.id]: event.target.value })
}
Copy the code

render() {
  // Wrong: handleClick was called and clicking will no longer trigger the function
  return <button onClick={this.handleClick()}>{'Click Me'}</button>
}
Copy the code

render() {
  return <button onClick={this.handleClick}>{'Click Me'}</button>
}
Copy the code

44. Do lazy functions support files with multiple exports

React.lazy currently only supports files that are exported by default. If you want to import a module under Exports, you can create an intermediate module and re-export it as the default module. It also ensures that the component tree remains healthy and that unused components are not associated. Let’s take exporting component files with multiple named components as an example

// MoreComponents.js
export const SomeComponent = / *... * /;
export const UnusedComponent = / *... * /;
Copy the code

Export more component.js components in an intermediate file, intermediatecomponent.js

// IntermediateComponent.js
export { SomeComponent as default } from "./MoreComponents.js";
Copy the code

You can now import the file and use lazy

import React, { lazy } from 'react';
const SomeComponent = lazy((a)= > import("./IntermediateComponent.js"));
Copy the code

46. What are fragments

This is a common pattern in React for components to return multiple elements, and Fragments allow you to group lists of subitems without adding additional nodes to the DOM.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>)}Copy the code

Grammar sugar can also be used

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>)}Copy the code

48. What is portals

Portal is the recommended method for rendering child components to DOM nodes that exist outside the PARENT component’s DOM hierarchy.

ReactDOM.createPortal(child, container)
Copy the code

The first argument is any renderable React child element, such as an element, string, or fragment. The second argument is the DOM element.

Chinese official documents is introduced: zh-hans.reactjs.org/docs/portal…

50. What is stateful component

A component can be called stateful if its behavior depends on its state. These stateful components typically use class components and have initialized state in constructors. React 16.8 uses hooks to generate stateful components in function components:

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  render() {
    // ...}}Copy the code

Using hook

import React, {useState} from 'react';

const App = (props) = > {
  const [count, setCount] = useState(0);

  return (
    // JSX)}Copy the code

import React from 'react'
import PropTypes from 'prop-types'

class User extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired
  }

  render() {
    return (
      <>
        <h1>{`Welcome, ${this.props.name}`}</h1>
        <h2>{`Age, ${this.props.age}`}</h2>
      </>)}}Copy the code

52. What’s the React advantage

• The performance of the program is improved through the virtual DOM
• JSX makes code easy to write and read
• Support local rendering and server-side rendering
• Easy to integrate with other frameworks because it’s just a view layer
• Easy to write integration and unit testing tools such as Jest

54. What is the wrong boundary in React 16