React Tutorial: Installation, JSX, Components, Props, State, Lifecycle, Forms, and Communication

React is a JavaScript library developed by Facebook; because it is based on Virtual DOM, it has fast response speed and supports cross-platform. (In fact, Virtual DOM may incur some performance overhead in diff in certain situations, but compared to other MVVM frameworks the performance impact is minimal, and it greatly improves development efficiency, which is currently the recommended approach.)

Installation

安装React：npm i -S react react-dom

安装Babel：npm i babel-loader babel-preset-react babel-plugin-import -S

HelloWorld

Modify src/App.js and start the app.

import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <h1>Hello, world!</h1> </header> </div> ); } export default App;

JSX

JavaScript syntax extension. We recommend using this syntax in React to describe UI information.

Components

One major feature of the React framework is building and rendering front-end pages through componentization. Defining components can be done in many ways; the most mainstream are functions and classes (classes allow adding local state and lifecycle hooks).

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

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

Props

State

1. State is internally controlled: state is private and fully controlled by the component itself.

2. Using setState to modify:

Internal call render
Supports asynchronous
Supports state merging updates

Lifecycle Events

React component lifecycle events are many; commonly used ones are:

componentDidMount: called after the component's first initialization render method; at this point the component (DOM and etc.) has been created. Usually used for AJAX or third-party JS frameworks.
shouldComponentUpdate: called after the component receives new state or props (not called during initial initialization or forceUpdate). Default returns true; returning false prevents render method invocation.
componentWillUnmount: called when the component is removed from the DOM; usually used to remove component-related events.

Lifecycle events are divided into three processes:

Component initialization (Mounting): getDefaultProps, getInitialState, componentWillMount, render, componentDidMount (getInitialState in ES6 class constructor can directly initialize state)
Component props update (Updating): componentWillReceiveProps(nextProps), shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate
Component unmounting (Unmounting): componentWillUnmount

Forms

Controlled Component

React is responsible for rendering the form component and still controls the changes that occur when the user subsequently inputs. Accordingly, its value is controlled by React, and the input form element is called a “controlled component”.

}

The input element in the DivInput component is a controlled component; its value and onChange are controlled by React.

Uncontrolled Component

render(){
    return (
        <div>
            <input type="text" ref={e => this.input = e}/>
            <button onClick={() => console.log(this.input.value)}>Click</button>
        </div>
    );
}

Attaching ref to a stateful component refers to the component instance; attaching ref to a DOM element refers to the specific DOM node (stateless components are not instantiated, so ref is null).

The ref attribute can be set to a callback function, which is the officially recommended usage; this function executes at the following times:

After component mounting: callback function executes immediately, parameter is the specific instance of this component.
When component is unmounted or the original ref attribute itself changes: callback also executes immediately, at which point the callback function parameter is null to ensure no memory leak.

ReactDOM.findDOMNode(ref) obtains the actual DOM node after the component is mounted.

Component Communication

Component communication solutions usually have two approaches:

Long press to scan the QR code, let's grow together