React学习笔记(3) State Props

2019-06-20 本文已影响0人 nieniemin

State，Props作为React组件的两大重要组成部分，有必要学习记录下。加深自己的印象。

State，Props是什么？
在熟悉State，Props，再先熟悉下React组件。In React, everything is a component。React核心思想是组件化，其中组件通过属性(props) 和 状态(state)传递数据。把传统DOM结构分成一个个单独的，相互独立的并且可重用的组件无疑会提高开发人员的效率。组件的优点非常多，如何向组件提供必要的数据？有两种方式，他们就是今天要学习的Props和State。
Props是Properties的简写。它们是只读组件，工作方式类似于HTML属性。Prop是一种将数据从父组件传递给子组件的方法,并且是逐层发送数据，直到它到达目标子组件。

class ParentComponent extends React.Component {
    render () {
        return (
            <div>
                <SonComponent name="我是父组件,子组件可以通过props.name获取到这句话!"/>
            </div>
        )
    }
}

class SonComponent extends React.Component {
    render () {
        return (
            <div>
                <div>我是子组件，通过props.name接收父组件的内容为：{this.props.name}</div>
                <GrandsonComponent value="我是子组件,孙子组件可以通过props.value获取到这句话!"/>
            </div>
        )
    }
}

class GrandsonComponent extends React.Component {
    render () {
        return (
            <div>
                <div>我是孙子组件，通过props.value接收子组件的内容为：{this.props.value}</div>
                <h1>逐级传递，不可通过props.name获取到父组件内容</h1>
                <div>我是孙子组件，无法通过props.name接收父组件的内容：{this.props.name}</div>
            </div>
        )
    }
}

ReactDOM.render(
    <ParentComponent/>,
    document.getElementById("myprops")
);

打印结果可以看出来props是父组件传递给子组件，并且是逐级传递

由上面的代码我们可知props是一个从外部传进组件的参数，主要作为就是从父组件向子组件传递数据，它具有可读性和不变性，只能通过外部组件主动传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。
如果单靠props，只能从父组件传递，意味着不能更改它们。这无疑是致命的。state就是用来处理更新。State是一个组件的UI数据模型，是组件渲染时的数据依据。
一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是props，而数据状态就是state。
通过下面的代码了解下state的简单用法。

class StateComponent extends  React.Component{
    constructor() {
        super();
        this.state = {
            name : "this is state",
        }
    }
    render() {
        return (
            <div>
                {this.state.name}
            <div>
        )
    }
}

在组件初始化的时候，通过this.state给组件设定一个初始的state，在第一次render的时候就会用这个数据来渲染组件。
state不同于props的一点是，state是可以被改变的。不过，不可以直接通过this.state=的方式修改，而需要通过this.setState()方法修改state。

class StateComponent extends  React.Component {

    constructor() {
       super();
       this.state = {
           count : 0,
       }
    };

    render() {
        return (
            <div>
                {this.state.count}
            </div>
        )
    }
}

接下来渲染出一个button，每点击一下，counter就+1

class StateComponent extends  React.Component {

    constructor() {
        super();
        this.state = {
            counter: 0,
        }
    }

    handleClick = () => {
        const counter = this.state.counter;
        this.setState(val => ({ counter: counter + 1 }));

    }
    render() {
        return (
            <div>
                counter is: {this.state.counter}
                <button onClick={this.handleClick} >点我</button>
            </div>
        )
    }
}

通过上述代码我们了解到两者的主要区别：

首先状态（state）和属性（props）类似，都是一个组件所需要的一些数据集合，但是state是私有的，可以认为state是组件的“私有属性（或者是局部属性）”。
State是可变的，是一组用于反映组件UI变化的状态集合；
Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。
在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态。

React学习笔记(3) State Props

猜你喜欢

热点阅读