React Introductory Series (1) A First Reading of Syntax and Concepts

Posted on Edited on In Waline:

After studying Vue for a long time, I suddenly became a little interested in its old friend React. I went to read its doc preliminarily and found that many things are indeed the same or different from Vue. I used this blog to record my understanding of it. Some notes of doc reading.

At the same time, from the perspective of the Vue source code idea I understand, I will interpret some possible principles behind React

Data storage

There are two ways to store data in React, one is called state and the other is called prop.

Prop

Prop corresponds to the prop in Vue. Prop is passed from the parent component to the child component and cannot be changed in the child component. If you want to change, you can only trigger an update event through the child component. After the parent component listens, it changes in the parent component.

State

State corresponds to the data defined inside each component in Vue. It is a property inside the component, and the component has full operation rights on each property.

However, there is a difference that the assignment operation to data in Vue will directly trigger the view update, because Vue actually hijacks the setter method of all data in data, and notifies the view update through the setter method.

In React, setState is used to manually notify view updates. In fact, I feel that this setState has done the same thing as the setter in Vue.

At the same time, multiple setStates in the React doc will be merged and executed together, that is, multiple view updates will be merged into one.

The Vue doc says that the view update operation triggered by each setter will enter a queue, called a tick, and each tick will execute the data in all queues in order. In fact, the final result is the same when executed together with multiple setStates. of.

JSX

Template

Vue provides a template way to build components. When parsing, it is actually parsed by the html-parser transformed by Vue itself. The template is treated as an ordinary html parsing. For user-defined components and Vue-defined properties, such as v -on, etc., will be treated specially, and then return to the render function.

JSX

React’s JSX is to convert the JSX syntax to React’s createElement method through babel, such as

1
2
3
4
5
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
1
2
3
4
5
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Function returns JSX

1
2
3
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
1
2
3
4
5
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Both of these methods actually define a Welcome component. It should be noted that the first letter of the custom component name in React must be capitalized.

Event handling

For example, traditional HTML:

1
2
3
<button onclick="activateLasers()">
  Activate Lasers
</button>

It’s a little different in React:

1
2
<button onClick={activateLasers}>  Activate Lasers
</button>

Another difference in React is that you cannot block the default behavior by returning’false ‘. You must explicitly use’preventDefault’. For example, in traditional HTML, to block links from opening a new page by default, you can write:

1
2
3
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

In React, it might look like this:

1
2
3
4
5
6
7
function ActionLink() {
  function handleClick(e) {    e.preventDefault();    console.log('The link was clicked.');  }
  return (
    <a href="#" onClick={handleClick}>      Click me
    </a>
  );
}

Binding problem with this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    //This binding is necessary in order to use'this' in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

Why call bind on methods inside function in constructor function here?

First of all, we need to understand the role of bind. It will return a new function. The this pointer of this function is determined, which is its parameter. When we call this new function, this in it is not dynamic.

Why do you want to do this? The reason is that this handleClick needs to use the setSstate of the child component, and this handleClick is actually called in the parent component. If it is not bound, then this actually points to the parent component.

If you feel that using’bind 'is troublesome, here are two ways to solve it. If you are using experimental public class fields 语法, you can use the class fields to bind the callback function correctly:

1
2
3
4
5
6
7
8
9
10
class LoggingButton extends React.Component {
  //This syntax ensures that'this' inside'handleClick 'is bound.//Note: This is * experimental * syntax. HandleClick = () => { console.log (' this is: ', this);}
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

Create React App 默认启用此语法。

If you don’t use the class fields syntax, you can use it in the callback箭头函数：

1
2
3
4
5
6
7
8
9
10
11
class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    //This syntax ensures that'this' inside'handleClick 'is bound. Return (< button on Click ={() => this.handleClick () } > Click me
      </button>
    );
  }
}

The reason why these two methods can solve the problem is that the arrow function is used, and the this of the arrow function is statically scoped, that is, it is defined when the arrow function is declared, and it will not change. It has the same function as bind.

Controlled component

In HTML, form elements such as < input >, < textarea >, and < select > usually maintain their own state and are updated based on user input. In React, mutable state is usually stored in the state attribute of a component and can only be obtained by using setState()To update.

We can combine the two to 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 that are controlled by React in this way are called “controlled components”.

For example, if we wanted the previous example to print out the name when submitting, we could write the form as a controlled component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    Alert ('Name of submission:' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          First name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

React philosophy

This part directly looks at the official doc, there is nothing difficult to understand: https://react.docschina.org/docs/thinking-in-react.html