react属性和状态

vue是 双向数据绑定 单向数据流(从上往下流)
react是 单向数据绑定 单向数据流(从上往下流)

react组件中 有两大数据源 属性props 状态state

• props 中存储的是 传进来的数据 相当于 vue组件中的props
• state 中存储的是 当前组件的私有数据 相当于 vue组件中的data

props 中存储的是 传进来的数据 相当于 vue组件中的props

// 不论是function组件还是class组件 props存储的都是 传进来的数据

function Com(props) {
    console.log(props);

    // react 中常用的就是解构赋值
    let { className, style } = props

    className = "qqq"
    // 这时更改上面的className属性名 下面的也会进行修改
    return <div className={className} style={style}>
        <h3>清欢</h3>
    </div>
}

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        // this 代表了当前的实例
        console.log(this.props);
        let { className, style } = this.props
        return <div className={this.props.className} style={style}>
            <h1 className={className}>清欢</h1>
        </div>;
    }
}

ReactDOM.render(<>
    <Com className="box" style={{ color: "red", fontSize: "18px" }} />
    <App className="box" style={{ color: "green", fontSize: "20px" }} />
</>, document.querySelector("#root"))

state 中存储的是 当前组件的私有数据 相当于 vue组件中的data

class App2 extends Component {
    constructor() {
        super();
        this.state = {
            name: "清欢"
        }
    }
    render() {
        let { name } = this.state
        return <div>
            <h2>清欢</h2>
            <h5>{this.state.name}</h5>
            <h6>{name}</h6>
        </div>;
    }
}

ReactDOM.render(<>
    <App2 />
</>, document.querySelector("#root"))