React中的props和state

一 代码示例

import React from "react";
import ReactDOM from "react-dom";

function App() {
    return (
        <div className="app">
            第一层
            <APP1 toapp1="hi1"></APP1>
        </div>
    );
}
class APP1 extends React.Component {
    constructor() {
        super();
        //类组件初始化state
        this.state = {
            n: 0,
        };
    }
    add() {
        // 类组件写state
        this.setState({ n: this.state.n + 1 });
    }

    render() {
        return (
            <div className="app1">
                {/*类组件读state*/}
                第二层n:{this.state.n}
                <button onClick={() => this.add()}>+1</button>
                {/*类组件读props*/}
                {this.props.toapp1}
                <APP2 toapp2="hi2"></APP2>
            </div>
        );
    }
}

function APP2(props) {
    // 函数组件初始化state
    const [n, setN] = React.useState(0);
    return (
        <div className="app2">
            {/*函数组件读state*/}
            第三层n:{n}
            {/*函数组件写state*/}
            <button onClick={() => setN(n + 1)}>+1</button>
            {/*函数组件读props*/}
            {props.toapp2}
        </div>
    );
}

二 总结

1. props属性是只读属性，函数组件使用props.x来读，类组件使用this.props.x来读
2. 类组件的注意事项

（1）this.state.n+=1无效？
     其实n已经改变了，只不过UI不会自动更新。调用setState才会触发UI更新（异步更新）。
     因为React没有像Vue监听data一样监听state。
（2）setState会异步更新UI
     setState之后，state不会马上改变，立马读state会失败。
     更推荐使用setState(函数)，旧的state作为参数，返回新的state
（3）this.setState(this.state)不推荐？
     React希望我们不要修改state（不可变数据）
     常用代码：setState({n:state.n+1})
（4）总结
     一般使用setState({n:state.n+1})
     推荐使用setState(函数)

3. 函数组件的注意事项

（1）与类组件类似的地方
     也要通过SetX(新值)来更新UI
（2）与类组件不同的地方
     没有this，全用参数和变量