The React (note 1)

JSX Javascript + XML

React doesn’t mandate the use of JSX, but most people find it visually helpful when putting JSX and UI together in JavaScript code

<h1>Hello, {name}</h1>    // {variable}
Copy the code

After compilation, the JSX expression is turned into a normal JavaScript function call and evaluated to get a JavaScript object

Expressions such as if/else can be used

JSX is closer to JS than HTML, onClick, onChange, tabIndex and other hump nomenclature

JSX avoids XSS attacks

Babel translates JSX into a function call called react.createElement ()

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
Copy the code

React DOM

The React DOM is not the browser DOM

Components & Props

There are two ways to define components:

// Js function: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } // ES6 Class class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}Copy the code

Defining a component with JSX converts the properties received by the component and the children of the component into a single object. The props are read-only properties

States & Life cycle

Similar to props, states is private and fully controlled by the current component. State is the object inside the component that handles changes. Props is the object that is passed from parent to child

1. Instead of modifying state directly, use the setState method
2. The constructor is the only place you can make an initial copy of this.stste
3. Multiple setState calls can be combined to cause asynchronous update problems for state and props, using arrow functions when both are dependent

	this.setState((state, props) => ({
	  counter: state.counter + props.increment
	}));
Copy the code

4. SetState merges multiple operations
5. States can only be accessed inside a component, and its state cannot be accessed externally
6. State can be passed as props to a child component, a “top-down” or “one-way” data flow
7. ComponentDidMount componentWillUnmount

The event processing

1. React events are named in a camelCase rather than pure lowercase.
2. To use JSX syntax you need to pass in a function as an event handler, not a stringonClick={functionName} onClick={this.handleClick} & this.handleClick = this.handleClick.bind(this);Normally, if you don’t add () after a method, for exampleonClick={this.handleClick}You should bind for this methodthis, or use the arrow function
3. Arrow functions can also be used in callbacks

<button onClick={() => this.handleClick()}>Click me</button> <button onClick={(e) => this.deleteRow(id, E)}>Delete Row</button> <button onClick={this.deleterow.bind (this, id)}>Delete Row</buttonCopy the code

Conditions apply colours to a drawing

React supports creating DOM elements using the JavaScript if operator or the conditional operator

function Greetings(props){
    const isLoggedIn = props.isLoggedIn;
    if(isLoggedIn){
        return <UserGreeting/>;
    }
    return <GuestGreeting/>
}

if(isLoggedIn){
        btn = <LogoutBtn onClick={this.handleLogoutClick} />
    } else {
        btn = <LoginBtn onClick={this.handleLoginClick} />
    }
<div>{btn}</div>
Copy the code

And operator &

return ( <div> <h1>Hello! </h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> );Copy the code

Ternary operation:

<div>The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.</div>
Copy the code

Block component rendering (Render method returns NULL directly) – Returning NULL in the render method of a component does not affect the lifecycle of the component, componentDidUpdate will still be called

List & Key

You can build collections of elements in JSX using {}. Note that you assign a key attribute to the list element, otherwise there will be a warning

Render () {const list = [1,2,3,4,5]; const items = list.map(item => <li key={item}>{item}</li> ); return ( <div> {items} </div> ) }Copy the code

Key helps React identify which elements have changed, such as being added or removed. Therefore, you should give each element in the array a definite identity. It is recommended to use the id of the data as the element key. The key used in an array element should be unique among its siblings

Key can pass information to react, but not to components. Key cannot read the value of key

JSX allows any expression to be embedded inside curly braces, so we can inline map()

return (
  <div>
    { list.map(item => 
    <li key={item}>{item}</li>
    )}
  </div>
)
Copy the code