React随笔,基本信息以及生命周期函数

代码部分理解

import React, { Component, Fragment } from "react";

import XiaojiejieItem from "./XiaojiejieItem"; //引入组件
class Xiaojiejie extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 初识赋值
      inputValue: "Grant",
      list: ["基础按摩", "精油推背"]
    };
  }
  //componentWillMount已经提示废弃使用,寻找新的替代
  // componentWillMount() {
  //   console.log("componentWillMount------组件将要挂载到页面的时刻");
  // }
  UNSAFE_componentWillMount() {
    console.log("componentWillMount------组件将要挂载到页面的时刻");
  }
  componentDidMount() {
    // FIXME: 一般这里进行axios请求获取数据
    // axios
    //   .get("改为你自己的接口URL")
    //   .then(res => {
    //     console.log("axios 获取数据成功:" + JSON.stringify(res.data));
    //     this.setState({
    //       list:res.data.userlist
    //     })
    //   })
    //   .catch(error => {
    //     console.log("axios 获取数据失败" + error);
    //   });
    console.log("componentDidMount------组件挂载完成时候执行");
  }
  // TODO: 要求返回一个布尔类型的结果，必须有返回值，这里就直接返回一个true了（真实开发中，这个是有大作用的）
  shouldComponentUpdate() {
    console.log("shouldComponentUpdate---组件发生改变前执行");
    return true;
  }
  UNSAFE_componentWillUpdate() {
    console.log(
      "componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行"
    );
    //componentWillUpdate在组件更新之前，但shouldComponenUpdate之后被执行。但是如果shouldComponentUpdate返回false，这个函数就不会被执行了。
  }
  componentDidUpdate() {
    console.log("componentDidUpdate----组件更新之后执行");
  }
  UNSAFE_componentWillReceiveProps() {
    console.log("componentWillReceiveProps");
    //发现这个函数什么时候都不会被执行，因为Xiaojiejie.js算是一个顶层组件，它并没接收任何的props。可以把这个函数移动到XiaojiejieItem.js组件中。
  }

  //TODO: render函数是只要有state和props变化就会执行
  render() {
    console.log("组件开始挂载......");
    return (
      <Fragment>
        {/* Fragment为最外层的套子,必须要有,或者div,唯一区别是一个显示一个不现实 */}
        <div>
          <label htmlFor="Grant">加入服务</label>
          {/* lable标签不能用for要用htmlFor */}
          <input
            id="Grant"
            type="text"
            value={this.state.inputValue}
            onChange={this.inputChange.bind(this)}
            ref={etarget => {
              this.input = etarget;
            }}
          />
          {/* 不建议用ref这样操作的，因为React的是数据驱动的，所以用ref会出现各种问题 */}
          {/* 注意绑定this或者尝试箭头函数 */}
          <button onClick={this.addList.bind(this)}>增加服务</button>
        </div>
        <ul>
          {/* 一般使用map方法来遍历需要循环的结构或者组件 */}
          {this.state.list.map((item, index) => {
            return (
              <XiaojiejieItem
                key={index}
                index={index}
                content={item}
                deleteItem={this.deleteItem.bind(this)}
              />

              // <li key={index} onDoubleClick={this.deleteItem.bind(this, index)}>
              //   {item}
              // </li>
            );
          })}
        </ul>
      </Fragment>
    );
  }
  deleteItem(index) {
    // react不能直接操作state,需要先取值保存然后操作,最后在用setState改变state
    let tmplist = this.state.list;
    tmplist.splice(index, 1);
    this.setState({
      list: tmplist
    });
  }
  addList() {
    this.setState({
      list: [...this.state.list, this.state.inputValue], //list展开办法
      inputValue: ""
    });
  }
  inputChange() {
    this.setState({
      inputValue: this.input.value
    });
  }
}

export default Xiaojiejie;

组件部分理解:

import React, { Component } from "react";
import PropTypes from "prop-types";
class XiaojiejieItem extends Component {
  constructor(props) {
    super(props);
    this.handleDoubleClick = this.handleDoubleClick.bind(this); //直接在这里绑定this,maybe可以提升性能
    this.state = {};
  }
  UNSAFE_componentWillReceiveProps() {
    console.log("componentWillReceiveProps");
    //发现这个函数什么时候都不会被执行，因为Xiaojiejie.js算是一个顶层组件，它并没接收任何的props。可以把这个函数移动到XiaojiejieItem.js组件中。
  }
  componentWillUnmount() {
    console.log("child - componentWillUnmount");
  }
  shouldComponentUpdate(np, ns) {
    // TODO: nextProps:变化后的属性,nextState:变化后的状态
    // FIXME: 注意这种写法会带来的性能提升以及经验提升
    if (np.content !== this.props.content) {
      return true;
    } else {
      return false;
    }
  }
  render() {
    console.log("child-render");
    return (
      <div onDoubleClick={this.handleDoubleClick}>{this.props.content}</div>
    );
  }
  handleDoubleClick() {
    // 直接在子组件内部可以使用父组件传递过来的方法和属性
    this.props.deleteItem(this.props.index);
  }
}
XiaojiejieItem.propTypes = {
  content: PropTypes.string.isRequired,
  deleteItem: PropTypes.func.isRequired,
  index: PropTypes.number.isRequired
};
export default XiaojiejieItem;