条件渲染

下面用成绩等级和游戏段位来实际来操作举例一下，以便于理解

//vue中：用v-if 
//angular中:用 ngIf
// 条件渲染: if
// rcc
import React, { Component } from "react";

export default class App extends Component {
  state = { score: 60 };

  // 条件渲染: 依赖原生的if判断 -- 制作函数 根据不同条件返回不同的 JSX

  // 非事件触发: 不涉及this指向问题
  showRes() {
    // setState(): 会刷新所有 数据变更时 相关 的UI
    let score = this.state.score;

    if (score < 60) {
      return <p>很遗憾, 您的成绩不及格!</p>;
    } else if (score >= 60 && score < 90) {
      return <b>您的成绩良好!</b>;
    } else {
      return <h2>恭喜您, 成绩优秀!</h2>;
    }
  }

  showRank() {
    let score = this.state.score;

    if (score < 20) {
      return <p>黑铁</p>;
    } else if (score < 40) {
      return <p>青铜</p>;
    } else if (score < 60) {
      return <p>白银</p>;
    } else if (score < 80) {
      return <p>黄金</p>;
    } else {
      return <p>铂金</p>;
    }
  }

  render() {
    return (
      <div>
        {/* {}中的代码 在页面渲染时 会自动触发! */}
        {this.showRes()}
        <h3>您的分数是:{this.state.score} </h3>
        <button onClick={() => this.setState({ score: this.state.score - 10 })}>
          减分
        </button>
        <button onClick={() => this.setState({ score: this.state.score + 10 })}>
          加分
        </button>

        {this.showRank()}
      </div>
    );
  }
}

此代码里面涉及this指向问题: 事件
onClick={this.方法名}

注释方法中的this指向
普通函数: 使用bind 绑定this
this.函数.bind(this，其它参数)

采用箭头函数保障this
()=> this.方法名(参数)

列表渲染

下面随便写几个列表，使用for循环来获取下标放到 jsx 语法中，形成新的数组，从而把数组的每一项渲染到页面上。

//vue 中：v-for
//angular:ngFor

import React, { Component } from "react";

export default class App extends Component {
  emps = [
    { name: "小花", age: 12, gender: 1 },
    { name: "小易", age: 12, gender: 1 },
    { name: "小爱", age: 12, gender: 0 },
    { name: "小乐", age: 12, gender: 1 },
    { name: "小胖", age: 12, gender: 0 },
  ];
  name = ["小意", "小爱", "小乐", "二傻", "二货", "二胖"];
  names_btns = [
    <button>亮亮</button>,
    <button>东东</button>,
    <button>然然</button>,
    <button>小新</button>,
    <button>华哥</button>,
  ];
  // 自动化处理:使用for 循环遍历数组 每一项放到 jsx 语法中，形成新的数组
  showRbtns() {
    let arr = [];
    // react 要求每一项有唯一标表示
    this.name.forEach((item, index) => {
      let btn = <button key={index}>{item}</button>;
      arr.push(btn);
    });
    return arr;
  }

  showlist() {
    let arr = []; // react 要求每一项有唯一标表示
    this.name.forEach((item, index) => {
      arr.push(
        <li key={index} style={{ color: "blue" }}>
            *{item}
                  
        </li>
      );
    });
    return arr;
  }

  showTrs() {
    let arr = [];

    this.emps.forEach((item, index) => {
      // react中不存在 过滤器 和 管道的说法  {{ xxx | pipe }}
      // 为什么要有管道/过滤器:  vue/angular 在html中写js不方便

      // react就是JS  不存在写JS不方便的情况
      let sex = ["女", "男"][item.gender]; // 数组[序号]

      arr.push(
        <tr key={index}>
          <td>{index + 1}</td>
          <td>{item.name}</td>
          <td>{item.age}</td>
          <td>{sex}</td>
        </tr>
      );
    });

    return arr;
  }
  render() {
    return (
      <div>
        {/* 数组的默认处，自动把数组的每一项形式到页面上 */}
        <div>{this.name}</div>
        {/* <div>{this.names_btns}</div> */}
        <div>{this.showRbtns()}</div> <div>{this.showlist()}</div>
        <table border="1">
          {/* DOM对 结构要求严格,  tr应该出现在 tbody thead 或 tfoot 里 */}
          <thead>
            <tr>
              <td>序号</td>
              <td>姓名</td>
              <td>年龄</td>
              <td>性别</td>
            </tr>
          </thead>
          <tbody>{this.showTrs()}</tbody>
        </table>
      </div>
    );
  }
}

此方法还可以用map方法来简化列表渲染，代码如下，仅供参考

import React, { Component } from "react";

export default class App extends Component {
  names = ["lucy", "lili", "Tom", "mike"];
  
  // 语法糖: ()=> { return xxxx; }   简化为 () => xxx
  showBtns = () =>
    this.names.map((item, index) => <button key={index}>{item}</button>);
  showLis = () => this.names.map((item, index) => <li key={index}>{item}</li>);
  // showBtns() {

  //   return this.names.map((item, index) => {

  //     return <button key={index}>{item}</button>;

  //   });

  //   // return arr;

  // }
  render() {
    return (
      <div>
        {this.showBtns()}
        <ul>{this.showLis()}</ul>
      </div>
    );
  }
}

生命周期

不同的组件, 从出生 到 销毁 之间经历的过程: 生命周期
过程中的关键节点 都会触发对应的函数 — 钩子函数

// 生命周期

//rcc

import React, { Component } from "react";



export default class App extends Component {

  state = { show: false, age: 10 };

  render() {

    return (

      <div>

        <button onClick={() => this.setState({ show: !this.state.show })}>

          切换Son组件的显示

        </button>

        {this.state.show ? <Son age={this.state.age} /> : ""}

        <button onClick={() => this.setState({ age: this.state.age * 2 })}>

          增加age: {this.state.age}

        </button>

      </div>

    );

  }

}

//子组件

class Son extends Component {

  state = { num: 1 };

  componentDidMount() {

    // 挂载时:  同vue的 mounted

    console.log("componentDidMount: 组件显示时, 挂载");

  }

  // 面试问题: 如何提高 React 渲染效率

  // 此生命周期的返回值 将会决定页面要不要刷新

  shouldComponentUpdate(props, state) {

    // 传入的值: 即将变成什么样, 问: 要不要刷新UI

    console.log("shouldComponentUpdate:", state);

    // num为偶数不更新

    if (state.num % 2 == 0) {

      console.log("num是偶数, 不刷新UI");

      return false;

    } //false代表不更新UI

    console.log("num是奇数, 刷新UI");

    return true;

  }

  // props: 父子传参的值, 类似于vue 的 props 属性

  // <Son name="东东" />  则 props = {name:'东东'}

  componentDidUpdate(old_props, old_state) {

    // 数据发生更新

    // 参数都是发生更新之前的值

    console.log("componentDidUpdate: 更新前", old_props, old_state);

    console.log("componentDidUpdate: 更新后", this.props, this.state);

  }

  componentWillUnmount() {

    //将要卸载时: 同vue的 destroy

    console.log("componentWillUnmount: 组件将要消失时, 卸载");

  }

  render() {

    return (

      <div>

        <h3>我是Son组件</h3>

        <button onClick={() => this.setState({ num: this.state.num + 1 })}>

          {this.state.num}

        </button>

      </div>

    );

  }

}

以上是米兔吖分享的有关于React的条件，列表渲染及其所经历的生命周期，如有错误和不足，希望路过的小伙伴可以在评论区留言哟！