1. React

React is a JAVASCRIPT library for building user interfaces.

React is primarily used to build uIs, and many people think of React as the V (view) of MVC.

React grew out of an internal Facebook project to build the Instagram site and opened source in May 2013.

React has high performance, very simple code logic, and more and more people are paying attention to and using it.

2. React

A simple example

  1. Render can render only one element/component at a time

  2. CreateElement – You can add more than three parameters, and all subsequent parameters will be treated as the contents of the element being created

  3. How do I add listeners to elements?

3, JSX writing method

Creating an element with createElement

– If the structure is simple, fine, but if the structure is complex, it’s harder to start

So they invented JSX to write page structures in React

3.2. What is JSX?

– JSX === JavaScript + X === (XML) === (eXtension)

– JSX is a JavaScript syntax extension that looks a lot like XML

3.3. Why use JSX?

– Using JSX makes writing page structures in React much simpler and more flexible

– JSX is type safe and errors can be found during compilation

– JSX executes faster because it is optimized after being compiled into JavaScript code

– Prevents XSS injection attacks

3.4 the nature of JSX?

– Browsers only know JS, not JSX, so we write JSX code that can’t be executed in browsers

– To solve this problem, we need to convert JSX to JS with Babel, i.e., to React. CreateElement ();

3.5. How to convert JSX to JS in a project?

– import the Babel. Js

– Add type= “text/ Babel” to script tag

<script src="./react17/react.development.v17.js"></script> <script src="./react17/react-dom.development.v17.js"></script> <script src="./react17/babel.min.js"></script> <body> <div Id ="app"></div> </body> <script type="text/ Babel "> let name =" old king "; MyRoot = (<div> <div>{name}</div> <button onClick={fn}> click </button> </div>); Reactdom.render (myRoot, document.querySelector("#app"), () => {console.log(" created successfully "); }); Function fn() {console.log(" output "); } </script>Copy the code

4. Function components

4.1. How to define components in React?

  • There are two ways to create components in React
  • First: define (stateless component) via pre-ES6 constructors
  • Second: Define (stateful component) by class from ES6

4.2. How do ES5 constructors define components

– Return the structure of the component in the constructor

<script type="text/ Babel "> let name =" Babel "; Return (<div> <div>{name}</div> <button onClick={fn}> click </button> </div>); } reactdom.render (<Wang />, document.querySelector("#app"), () => {console.log(" created successfully "); }); Function fn() {console.log(" button "); } </script>Copy the code

Class components

How do YOU define components through ES6 classes

– Define a class that implements the Render method and returns the component structure in the render method

<script type="text/ Babel "> let name =" Babel "; Render () {return (<div> <div>{name}</div> <button); render(<div> <div>{name}</div> <button OnClick ={fn}> </button> </div>); }} reactdom.render (<Wang />, document.querySelector("#app"), () => {console.log(" created successfully "); }); Function fn() {console.log(" click "); } </script>Copy the code

6. The difference between stateful and stateless components

6.1. Stateful and stateless Components?

– First of all, state in a component refers to data

Stateful components are components that have their own data (logical components)

Stateless components are components that have no data of their own (presentation components)

6.2. How do I define my own state?

– Components that inherit from react.componentinherit a state property from their parent class by default

The state property is specifically used to store the current data

– So any component that inherits from react.componentis stateful

– So any component that does not inherit from React.componentis stateless

– So class components are stateful components

– So function components are stateless components

<script type="text/ Babel "> let name =" Babel "; // function WANG(){// return(// <div> // <div>{state + name}</div> // {// // returns state is not defined //} // <button Click onClick = {fn} > < / button > / / < / div > / / / /} / / ReactDOM render (< WANG / >, the document querySelector (" # app "), () => {// console.log(" created successfully "); / /}); class Wang extends React.Component { render() { return ( <div> <div>{this.state + name}</div> { <button onClick={fn}> click </button> </div>); }} reactdom.render (<Wang />, document.querySelector("#app"), () => {console.log(" created successfully "); }); Function fn() {console.log(" click "); } </script>Copy the code

7. Use of setState

Note the state property

– Never modify state directly

– Modifying state directly does not trigger an interface update

– The interface update will only be triggered if state is changed using the setState method

<script type="text/babel"> class Wang extends React.Component { constructor() { super(); This. state = {name: "old ", age: 18,}; } render() {return (<div> <div> name {this.state.name}</div> <div> age {this.state.age}</div> <button The onClick = {() = > enclosing fn (this) state) age)} > click < / button > < / div >). } fn = (val) => {// this.state.age=20 console.log(' native value ',val); // console.log(' modified value ',this.state.age); This.setstate ({age:21}) setTimeout(()=>{// You need to get the new value asynchronously because setState is normally asynchronous console.log(this.state.age); }}, 200); } reactdom.render (<Wang />, document.querySelector("#app"), () => {console.log(" created successfully "); }); </script>Copy the code

8

8.1. This points to the problem

– Prior to ES6, whoever called this in a method was the same.

You can also modify this using the call/apply/bind methods

– as of ES6, arrow functions have been added, arrow functions don’t have their own this,

The this in the arrow function is the closest this outside the function

And since the arrow function does not have its own this, you cannot modify this through the call/apply/bind methods

8.2 listen for this in the event

– React When a listener is called, the apply method changes this to undefined by default

So we can’t get the state of the current component through this in the listener method. (undefined. State)

– If you want the state of the current component in the listener method, you must ensure that this in the listener method is the current instance

So we can use the arrow function to make React unable to modify this in the listener method so that this is the current instance

<script type="text/babel"> class Wang extends React.Component { constructor() { super(); This. state = {name: "old ", age: 18,}; } render() {return (<div> <div>{this.state.name}</div> <button onClick={()=>{this.fn(this.state.age)}}> click </button> </div> ); } fn = (val) => {console.log(" clicked ",val); }; } reactdom.render (<Wang />, document.querySelector("#app"), () => {console.log(" created successfully "); }); </script>Copy the code

8.3 test:

import React from 'react'; Const STR = 'called, this refers to: '; Constructor (){console.log(' handler ${STR} ',this); } render(){ console.log(`render ${STR}`,this); Return (<div> <h1>hello World</h1> <label htmlFor = 'BTN '> </label> <input ID =" BTN "type="button" Value = 'click' onClick = {this.handler}/> </div>)}} export default AppCopy the code