react--知识点

react执行顺寻

constructor->componentWillMount->render->ComponentDidMount->render

一个React项目需要更新一个小组件时，很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法，形成新的虚拟DOM，再用diff算法对新旧虚拟DOM进行结构和属性的比较，决定组件是否需要重新渲染

无疑这样的操作会造成很多的性能浪费，所以我们开发者可以根据项目的业务逻辑，在shouldComponentUpdate()中加入条件判断，从而优化性能

react 父子组件调用

import React, { Component } from "react"
import ProTypes from "prop-types"

class User extends Component {

    constructor(props) {
        super(props);
        this.state = {
            date: "2222"
        };

        this.username = "张三";

        console.log("props", props);
    }


    componentDidMount() {
        console.log("componentDidMount", "componentDidMount");




    }

    componentWillUnmount() {
        console.log("componentDidMount", "componentDidMount");
    }

    addUser = () => {
        this.setState({
            date: "1111"
        })

        alert("子组件方法");
    }

    diaoyongApp = () => {
        //调父方法
        const { appTest } = this.props;
        appTest();
    }


    render() {
        console.log("render", "render");
        return (
            <div>
                1-{this.username}
                2-{this.props.name}
                3-{this.props.other}

                <p><button onClick={this.diaoyongApp.bind(this)}> 调用父方法</button></p>
            </div>
        )
    }
}
//验证传递得参数，如果不对会有警告
User.ProTypes = {
    //传递参数是string,必选项
    name: ProTypes.string.isRequired
}

export default User

import React, { Component } from "react"
import User from "./User"
/**
 * <>标签必须结束
 */
class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
    };

    this.appdata = "aaa";
  }

  // appTest = () => {
  //   alert("父方法" + this.appdata);
  // }

  appTest() {
    alert("父方法" + this.appdata);
  }

  //调用子方法
  diaoyongChild = () => {
    this.user.addUser();
  }


  render() {
    console.log("appdata", this.appdata);
    let appobj = "bbb";
    return (
      <div className="App">
        <User name="张三" other={appobj} appTest={this.appTest.bind(this)} ref={user => this.user = user} />

        <button onClick={this.diaoyongChild}>调用子组件方法</button>

      </div>
    )
  }
}

export default App

 //react 父组件调用子组件中的事件

import React, {Component} from 'react';

export default class Parent extends Component {

　　render() {

　　　　return(

　　　　　　　　<div> <Child onRef={this.onRef} />

　　　　　　　　<button onClick={this.click} >click</button>

　　　　　　　　</div>

　　　　)

　　}

　　onRef = (ref) => {

　　　　this.child = ref

　　}

　　click = (e) => {

　　　　this.child.myName()

　　}

}

 

class Child extends Component {

constructor(props){
    super(props);
    this.state = {value: ''};
}

　　componentDidMount(){

　　　　this.props.onRef(this)

　　}

　　myName = () => {

　　　　this.setState({value:'boonook'});

　　}

render(){
    return(
        <div>
            我是子组件
            <input value={this.state.value} type="text"/>
        </div>
    )
}

}