持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情。

今天主要学习的是react中的state、条件渲染、列表和键循环输出数据。

react中的state

state是react组件的核心，是数据的来源，必须尽可能简单，基本上状态是确定组件呈现和行为的对象，与props不同，它们是可变的，并创建动态和交互式组件，可以通过this.state访问他们。

语法：

import React from "react";
class App extends React.Component {
  // 构造方法
  constructor() {
    // 继承父类构造方法
    super();
    // state相当于vue里面的data方法
    this.state = {
      name:'张三',
    };
  }
  render() {
    return (
      <div className="App">
        {this.state.name}
      </div>
    );
  }
}
export default App;

super的作用

在super()被调用之前，子类是不能使用this的，在ES2015（ES6）中，子类必须在constructor中调用super()，传递props给super()的原因则是便于子类中能在constructor访问props。

setState方法的使用

setState方法的作用是更新state里面的值，是一个异步方法；也可以用来更新组件的状态，方法的第二个参数是一个回调函数。

语法：

this.setState({name:'张三'},()=> {
   console.log(this.state);
});

this.setState({name:'张三'})

条件渲染

react的条件渲染是三元表达式判断。

1. 写法一：（常用）

import React from "react";
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      bShow: true, // true显示，false隐藏
    };
  }
  render() {
    return (
      <div className="App">
        {this.state.bShow ? <div className="box">内容</div> : ""}
      </div>
    );
  }
}
export default App;

 {this.state.bShow ? <div className="box">内容</div> : ""}
 // 三元表达式在去掉否的情况下怎么写
 this.state.bShow && <div className="box">内容</div>

2. 写法二：

import React from "react";
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      bShow: true,
    };
  }
  render() {
    let box ="";
    if(this.state.bShow) {
      box = <div className="box">内容</div>
    }
    return (
      <div className="App">
        {/* {this.state.bShow ? <div className="box">内容</div> : ""} */}
        {box}
      </div>
    );
  }
}
export default App;

注意：数据渲染必须在this.state里面定义。

循环

react的数据循环常用es6的一些方法来进行渲染：

示例：

import React from "react";
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      goods: [
        {
          id: 1,
          title: "标题1",
        },
        {
          id: 2,
          title: "标题2",
        },
        {
          id: 3,
          title: "标题3",
        },
      ],
    };
  }
  render() {
    return (
      <div className="App">
        <div>
          {this.state.goods.map((item, index) => {
            return <div key={index}>{item.title}</div>;
          })}
        </div>
      </div>
    );
  }
}
export default App;

这里需要注意的是，在循环中必须加上key值，否则会报错：

接下来继续学习react的知识点~