react 的状态 简单介绍

react 的 state状态

function 函数组件 视图组件 通常拥有展示 （推荐使用） 通常拥有展示 class 类组件 容器组件 存储组件 处理数据

快捷创建 imrc ccc

传参

// 导入react 和react的组件 从react
import React, { Component } from "react";
//创建个App 类继承Component组件
class App extends Component {
  // 构造函数 props 是父组件传入的参数
  constructor(props) {
    //调用父类的构造函数
    super(props);
    // 定义状态state
    this.state = {
      num: 5,
        };
  }
  add = (n = 1) => {
    this.setState({
      num: this.state.num + n,
    });
  };
  // 渲染内容
  render() {
      return (
      <div>
        <h1>state状态</h1>
        {/* 如果传入函数名不带括号 默认调用会传入事件对象 */}
        <button onClick={this.add}>{this.state.num}</button>
        <button onClick={() => this.add()}>{this.state.num}</button>
        <button onClick={this.add.bind(this, 1)}>{this.state.num}</button>
      </div>
    );
  }
}
​
export default App;
​

双向绑定

// 导入react 和react的组件 从react
import React, { Component } from "react";
//创建个App 类继承Component组件
class App extends Component {
  // 构造函数 props 是父组件传入的参数
  constructor(props) {
    //调用父类的构造函数
    super(props);
    // 定义状态state
    this.state = {
      msg: "我爱前端",
    };
  }
  // 渲染内容
  render() {
    const state = this.state;
    return (
      <div>
        {/* 当表单发送变化时候 更新msg的值 */}
        {/* e.target 事件对象 表单input */}
        <h1>表单双向绑定</h1>
        <p>{this.state.msg}</p>
        <input
          value={state.msg}
          onChange={(e) => this.setState({ msg: e.target.value })}
        />
      </div>
    );
  }
}
​
export default App;
​
​
​

dom引用

// 导入react 和react的组件 从react  
import React, { Component, createRef } from "react";
//创建个App 类继承Component组件
class App extends Component {
  // 构造函数 props 是父组件传入的参数
  constructor(props) {
    //调用父类的构造函数
    super(props);
    // 定义状态myref
     this.myref = createRef();
  }
  // 渲染内容
  render() {
    const state = this.state;
    return (
      <div>
        <h1>dom引用</h1>
        {/* 非受空表单 */}
        <input ref={this.myref} />
        {/* this.myref.current 代表input */}
        <button onClick={() => alert(this.myref.current.value)}>获取</button>
      </div>
    );
  }
}
​
export default App;
​

条件渲染

三元运算 条件？ 正确 ：错误

​
// 导入react 和react的组件 从react  
import React, { Component } from "react";
//创建个App 类继承Component组件
class App extends Component {
  // 构造函数 props 是父组件传入的参数
  constructor(props) {
    //调用父类的构造函数
    super(props);
   // 定义状态state
    this.state = {
        isLand: true,
    };
  }
  // 渲染内容
  render() {
    const state = this.state;
    return (
      <div>
        <h1>条件渲染</h1>
        <button onClick={() => this.setState({ isLand: !this.state.isLand })}>
          切换
        </button>
        {this.state.isLand ? <p>欢迎回来</p> : <p>请先登录</p>}
        {this.state.flag && <p>你好</p>}
      </div>
    );
  }
}
​
export default App;
​

条件&&内容

// 导入react 和react的组件 从react  
import React, { Component } from "react";
//创建个App 类继承Component组件
class App extends Component {
  // 构造函数 props 是父组件传入的参数
  constructor(props) {
    //调用父类的构造函数
    super(props);
   // 定义状态state
    this.state = {
      flag: true,
    };
  }
  // 渲染内容
  render() {
    const state = this.state;
    return (
      <div>
        <h1>条件渲染</h1>
        {this.state.flag && <p>你好</p>}
      </div>
    );
  }
}
​
export default App;
​

列表渲染

// 导入react 和react的组件 从react  
import React, { Component } from "react";
//创建个App 类继承Component组件
class App extends Component {
  // 构造函数 props 是父组件传入的参数
  constructor(props) {
    //调用父类的构造函数
    super(props);
   // 定义状态state
    this.state = {
     list: ["react", "vue", "jquery"],
    };
  }
  // 渲染内容
  render() {
    const state = this.state;
    return (
      <div>
      <h1>列表渲染</h1>
        {/* item 当前被遍历的元素项 react vue jquery */}
        {/* index 当前元素逇下标 0 1 2 3 */}
        {state.list.map((item, index) => (
          <h4 key={index}>{item}</h4>
        ))}
        <p>{state.list}</p>
      </div>
    );
  }
}
export default App;