React Components Introduction

React Components Introduction

React inside the smallest unit: React element / virtual node

In React, there is a concept called the assembly

Components of: the extent of particles finer than page is divided into modular division.

The method of creating components: class (class inheritance): class app extends {};

2020.02.13

The core concept of two components: state and props

state: used to describe the internal state (dynamic data) of a component

[Pictures of foreign chains dump fails, the source station may have a security chain mechanism, it is recommended to save the picture down directly upload (img-9iexgbZG-1582465469233) (C: \ Users \ joey \ AppData \ Roaming \ Typora \ typora-user-images \ image-20200213145958058.png)]

There is a change to re-render nodes will automatically find their post-react to different nodes, found

For example:

import React from "react";

export default class Counter extends React.Component {
    state = {
        count: 0
    };
    render() {
        return (
            <div>
                <p>
                    你一共点击了{this.state.count}次
                </p>
//给button添加事件，用户点击加号count就加1，
                <button
                    onClick={
                        ()=>{
                            this.setState({
                                count:this.state.count+1
                            })
                        }
                    }
                >+
                </button>
            </div >
        )
    }
}

Function scope only to produce 1

React.createRef (); method, which is used to obtain a node native

Package

Assembly may be divided into a stateless component (Stateless) and stateful assembly (Stateful)

Props external interface

The nested components react, it will be used props

[Pictures of foreign chains dump fails, the source station may have a security chain mechanism, it is recommended to save the picture down directly upload (img-qboqaiZj-1582465469235) (C: \ Users \ joey \ AppData \ Roaming \ Typora \ typora-user-images \ image-20200222094530833.png)]

To react in the assembly interfaces subassembly, the subassembly is brought directly used, attention in order to avoid errors, props subassembly give the default value

static defaultProps = {};//默认值，避免运行出错

[Pictures of foreign chains dump fails, the source station may have a security chain mechanism, it is recommended to save the picture down directly upload (img-XXrmQD5F-1582465469245) (C: \ Users \ joey \ AppData \ Roaming \ Typora \ typora-user-images \ image-20200222094727272.png)]

The sample code

import React from "react";//引入React以及自定义的两个组件
import Title from "./title"
import Ibutton from "./Ibutton"

export default class extends React.Component {
    state = {//自定义count为1
        count: 1
    }
    increase = () => {
        this.setState({
            count:this.state.count + 1   //count增加的方法
        })
    }
    decrease = () => {
        this.setState({
            count:this.state.count - 1   //count减小的方法
        })
    }
    render() {
        return (
            <div>
                <Title count={this.state.count} />   //count接口把值暴露出去
                <Ibutton name={"+"} onClick={this.increase} />
                <Ibutton name={"-"} onClick={this.decrease} />
            </div>
        )
    }
}

Subassemblies Ibutton and Title

//title:
import React from "react";

export default class extends React.Component{

    static defaultProps = { //定义默认值，避免出错，兼容性考虑
        count:0
    }
    render(){
        return (
        <h1>{this.props.count}</h1>
        )
    }
}
//Ibutton：
import React from "react";

export default class extends React.Component{

    static defaultProps = {  //同样的定义默认值，避免出错，兼容性考虑
        name:"55",
        onClick:()=>{console.log("click")}
    }

    render(){
        return (
        <button onClick={this.props.onClick}>{this.props.name}</button>
        )
    }
}

pureComponent

React.PureComponent

React.PureComponentAnd React.Componentit is very similar. The difference is React.Componentnot achieved shouldComponentUpdate(), and React.PureComponentin contrast to the shallow state and prop way to achieve this function.

If given the same props React components and state, render()the function renders the same content, use and in some cases React.PureComponentcan improve performance.

note

React.PureComponentThe shouldComponentUpdate()relatively shallow as the only object. If the object contains complex data structures, it is possible because they can not check the deep differences, error than the results. Only when your props and the state is relatively simple, just use React.PureComponent, or when the deep changes in the structure of data calls forceUpdate()to ensure that the components are properly updated

Note: Before we state the reason for not directly manipulate the data inside is the truth, in order to optimize performance.