Element and Component

1. What is Element?

const div1 = React.createElement("div",{props},[child])
Copy the code

This is how a React element is created, but it needs to be used with reactdom.render (div1,rootElement) to appear on the page

2. Component

const Div =(a)= >{
    return (React.createElement("div",{props},[child]))
}
Copy the code

When an element is wrapped in a function, it becomes a component. how to refer to it

ReactDOM.render(Div(), rootElement);
Copy the code

3. Component types (2 types)

3.1 Functional Components

function App(props) {
  return (
    <div className="App">
    {props.name}
    <component props/>
    </div>
  );
}
Copy the code

React.creatElement is written in JSX syntax and encapsulated as a function. This is called either directly with reactdom. render(
,rootElement) or directly with < Component props/> inserted in other components, and this function receives an external parameter, of which various properties can be used inside the function

props="string"|{obj}
Copy the code

3.2 class components

//ES5
const A =React.createClass({
    render(){
    return (
    <div>JSX</div>)}})Copy the code
//ES6
class Son extends React.Component {
  constructor(props) {
  super(props)
  / / will be written
  this.state{n:1}
  // Initializes the state property of the instance
  }
  render(){
      return (<div>{this.props.name}</div>)
      // generate an instance of react.component. this refers to this object}}Copy the code

<Son/>When translated by babel-loader, it is understood asReact.createElement(Son)So when we write a component in the form of a tag, it will be converted into a React element and rendered into a page<div props>... child... </div>Label equivalentReact.createElement("div",props,child)

When the function called is a class, it is automatically callednew SonGenerate an instance and call its Render () method, for those interested in the compilation processbabel-onlinePractice a

4. Access to props(external data) and state(internal dataThe sample

4.1 class components

Props:

withthis.props. Name gets the object property and automatically passes the parameter to render()Copy the code

The state:

withthis.state.name used to obtain object attributesthis.setState({key:newValue}) writes data//setState generates a new object and a corresponding UI
Copy the code

4.2 Function Components

Props:

Props. Name You need to manually define a parameter in the function to receive propsCopy the code
The state:
const [n,set<button onClick={() => <button onClick={() =>setN(N +1)}>+1</buttonsetN to write,setN does not change N but produces a new N // the name of the first item and the name of the second item in this array is just an interface nameCopy the code
SetN and setState are both asynchronous!!
It is recommended that you pass in a function to prevent errors
add() {
   this.setState(state= > {
   // The props and state parameters are passed by default
     const n = this.state.n + 1;
     / / new n
     console.log(n);
     return { n: n };
     // Return a new object
   });
 }
Copy the code

4.3 is also a supplementary note on setStateThe sample

class Son extends React.Component {
constructor() {
  super(a);this.state = { n: 0.m:1 };
}
add() {
  this.setState({ n: this.state.n + 1}); }}Copy the code

If there are multiple attributes in the data and we call setState only to change some attributes, will the rest of the data be overwritten as undefined? The answer is not because React helps us use the same attributes

add() {
   this.setState(... this.state,{n: this.state.n + 1 });
   / /... This. state means that all attributes are copied and overwritten with the same name
 }
Copy the code

However, this is a shallow copy, meaning that only the first level attributes are used, if{m:{x:0}}This structure copies only one layer of m attributes, so if there are multiple layers of m attributes it is recommended to use the above expansion syntax “… obj”

However, setN in the function component will not use the previous attributes at all, write namely overwrite, so if there are multiple attributes in the function component, it is recommended to use the expansion syntax to copy the previous attributes and then overwrite with the same name

Vue and React differ in data update

Vue

Vue encapsulates and listens to the data object. When the data changes, the UI part corresponding to the data is updated accordingly. In actual implementation, it does not replace all the data but only updates the changed part using the virtual DOM

React

React follows a functional programming philosophy. It does not allow changes to the raw data, nor does it listen for changes to the raw data. When the data changes, it directly generates a new data object and a new UI, then uses Diff to render different parts of the virtual DOM and partially render the UI on the page

5. React event binding

class Son extends React.Component { constructor() { super(); this.state = { n: 0, m: 0 }; } addN = () => { this.setState({ n: this.state.n + 1 }); <button onClick={this.addN}>n+1</button>Copy the code

This is an evolution of the following notation, which is completely equivalent, using the arrow function to prevent the object to which this points from changing

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0,
      m: 0
    };
      this.addN = () => {
    this.setState({ n: this.state.n + 1 });
  }
 }
}

<button onClick={this.addN}>n+1</button>
Copy the code
The essential difference is that the construction attribute is defined on the instance, whereas the addN function is defined on Son. Prototype, which is the prototype of all Son instances, and can be called by all instances
class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0,
      m: 0
    };
 }
    addN(){
    this.setState({ n: this.state.n + 1 });
  }
}

<button onClick={()=>{this.addN()}>n+1</button>
Copy the code

Class component details