React 第四章 组件状态与数据传递

组件状态

早期类组件被称之为有状态组件，就是因为在类组件中能够维护组件数据。

class 类名 extends React.Component{
  constructor(){
    super();
    // 设置组件自身的数据状态
    this.state = {
      xxx : xxx
    }
  }
  render(){
    return (
    	// 通过 {this.state.xxx} 来获取状态数据
    )
  }
}

// 或者
class 类名 extends React.Component{
  state = {
      xxx : xxx
  }
  render(){
    return (
    	// 通过 {this.state.xxx} 来获取状态数据
    )
  }
}

不要直接去修改状态值，而是应该通过 setState 方法修改组件的 state 状态数据。

this.setState({
  xxx: 新值
})

setState，它对状态的改变，可能是异步的。

如果改变状态的代码处于某个 HTML 元素的事件中，则其是异步的，否则是同步

import React from 'react';
export default class Helloworld extends React.Component {
    state = {
      count: 0,
    }
    clickHandel = () => {
      this.setState({count: this.state.count + 1});
      this.setState({count: this.state.count + 1});
      this.setState({count: this.state.count + 1});
      this.setState({count: this.state.count + 1});
    }
  render() {
    return (
      <div>
        Hello World!
        {this.state.count}
        <div><button onClick={this.clickHandel}>+1</button></div>
      </div>
    );
  }
}

每次点击按钮，虽然我们设置了四次 count， 但是count只加了 1。原因是 this.setState 在HTML事件中是异步的。在改变 count 值的时候，count 数据还没有改变，所以只加了1

如果在事件处理函数里面想拿到 setState 执行后的数据，可以提前使用一个变量来存储计算结果，或者使用 setState 的第二个参数，它是一个函数，这个函数会在 state 更新后被调用。

clickHandel = () => {
	// 提前使用一个变量来存储计算结果
	const newCount = this.state.count + 1;
	this.setState({count: newCount});
	console.log(newCount)
}

clickHandel = () => {
	// 提前使用一个变量来存储计算结果
	const newCount = this.state.count + 1;
	this.setState({count: this.state.count + 1}, () => {
		console.log(this.state.count)
	});
	
}

最佳实践：

1. 把所有的 setState 当作是异步的
2. 永远不要信任 setState 调用之后的状态
3. 如果要使用改变之后的状态，需要使用回调函数（setState 的第二个参数）
4. 如果新的状态要根据之前的状态进行运算，使用函数的方式改变状态（setState 的第一个函数）

React 会对异步的 setState 进行优化，将多次 setState 进行合并（将多次状态改变完成后，再统一对 state 进行改变，然后触发 render）

clickHandle = () => {
    this.setState((cur) => ({
      num: cur.num + 1
    }),()=>{
      console.log(this.state.num,'num');
    })
    this.setState((cur) => ({
      num: cur.num + 1
    }))
    this.setState((cur) => ({
      num: cur.num + 1
    }))
  }

props

和 Vue 一样，在 React 中组件会存在层级关系，那么自然会涉及到组件之间进行数据的传递。

如果是父组件向子组件传递数据，则使用 props。

如果是函数组件，props 作为函数的一个参数传入：

function 组件名(props) {
  return (
    // 一段 JSX
    // 通过 props.xxx 获取传入的值
    <div>
      <p>姓名：{props.name}</p>
      <p>年龄：{props.age}</p>
      <p>性别：{props.gender}</p>   
    </div>
  );
}

如果是类组件，则需要在 constructor 中将 props 通过 super 传递给父类，然后通过 this.props 的方式来获取传入的值：

class 组件名 extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
       // 一段 JSX
    	 // 通过 this.props.xxx 获取传入的值
        <div>
          <p>姓名：{this.props.name}</p>
          <p>年龄：{this.props.age}</p>
          <p>性别：{this.props.gender}</p>   
        </div>
     );
	}
}

通过 props.children，可以实现类似于 Vue 中插槽的功能，例如：

class 组件B extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div>
          {this.props.children}
      </div>
    );
  }
}
class 组件A extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return (
      <组件B>
        <p>Hello, React</p>
        <p>Hello, Redux</p>
        <p>Hello, Facebook</p>
        <p>Hello, Google</p>
      </组件B>
    );
  }
}

props 验证

在 Vue 中，可以对传入的 props 设置默认值，以及验证 props 的有效性，在 React 中，针对 props 也可以做这些事。

通过 defaultprops 就可以对 props 设置默认值。

function Greeting(props) {
  const { name, age, gender } = props;
  return (
    <div>
      <p>姓名：{name}</p>
      <p>年龄：{age}</p>
      <p>性别：{gender}</p>   
    </div>
   );
}
// 设置默认的 props 值，当组件没有传值时会使用默认值
Greeting.defaultProps = {
  name : 'hello',
  age : 18,
  gender : 'male'
};

class Greeting extends React.Component {
  constructor(props) {
    super(props);
  }
  // 设置默认的 defaultProps 属性值
  static defaultProps = {
    name : "hello",
    age : 18,
    gender : 'male' 
  }
  render() {
    return (
      <div>
        <p>姓名：{this.props.name}</p>
        <p>姓名：{this.props.age}</p>
        <p>姓名：{this.props.gender}</p>
      </div>
    );
  }
}
// 或者
Greeting.defaultProps = {
    name : "hello",
    age : 18,
    gender : 'male' 
}

关于 props 的类型检查，从 React v15.5 版本开始，移入到了 prop-types 库 。

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

import PropTypes from 'prop-types'

function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}

HelloWorldComponent.propTypes = {
  name: PropTypes.string
}

export default HelloWorldComponent

状态提升

在 Vue 中，父传子通过 props，子传父通过触发自定义事件。

在 React 中，如果子组件需要向父组件传递数据，同样是通过触发父组件传递给子组件的事件来进行传递。

这在官网中被称之为“状态提升”：https://zh-hans.reactjs.org/docs/lifting-state-up.html

汇率转换案例：

父组件

import React from "react";
import Money from "./component/Money";

// 类组件
class App extends React.Component {
  state = {
    dollar: "",
    rmb: ""
  }

  transformToRMB = (value) => {
    if (parseFloat(value) || value === "" || parseFloat(value) === 0) {
      this.setState({
        dollar: value,
        rmb: value === "" ? "" : (value * 7.3255).toFixed(2)
      })
    } else {
      alert("请输入数字");
    }
  }

  transformToDollar = (value) => {
    if (parseFloat(value) || value === "" || parseFloat(value) === 0) {
      this.setState({
        dollar: value === "" ? "" : (value * 0.1365).toFixed(2),
        rmb: value
      })
    } else {
      alert("请输入数字");
    }
  }

  render() {
    return (
      <div>
        <Money text="美元" money={this.state.dollar} transform={this.transformToRMB} />
        <Money text="人民币" money={this.state.rmb} transform={this.transformToDollar} />
      </div>
    )
  }

}

export default App;

子组件

import React from 'react';

function Money(props) {


    function handleChange(e){
       // 在子组件中，要做的事情很简单，将用户数据的值，传递给父组件
       // 让父组件来进行修改
       props.transform(e.target.value);
    }


    return (
        <fieldset>
            <legend>{props.text}</legend>
            <input type="text" value={props.money} onChange={handleChange}/>
        </fieldset>
    );
}

export default Money;