React 组件 props 属性和 state 属性

内容大纲：

                     1、React 组件
                     2、props 属性
                     3、state 属性
                     4、props和state属性的区别
                     5、refs属性
                     6、父子组件传值
                     7、兄弟组件传值

一、React 组件

1.1 React概述

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 拥有较高的性能，代码逻辑简单，越来越多的人已开始关注和使用它。

1.2 React组件概述

通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
使用React 组件使得我们的应用更容易来管理。

1.3 React 组件的创建

1.3.1 使用函数定义了一个组件

// 使用函数定义了一个组件
import React from 'react';
function User(){
    return (
        <div>hello user</div>
    );
};
export default User;

1.3.1 使用 ES6 class 来定义一个组件

// 使用函数定义了一个组件
import React from 'react';
class Person extends React.Component {
  render() {
    return (
    	<div>
			<h1>Hello Person!</h1>
		</div>
	);
  }
}
export default User;

注意：

组件类只能包含一个顶层标签，有别的也会报错。
创建的组件最好以大写字母开头，文件以及名字最好大小写一致

二、props属性

2.1 props属性概述

props属性用于组件之间的通信
子组件的props元素接收父组件传递的值，用this.props就可以调用传递过来的值
react中说的单向数据流值说的就是props，props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。

2.2 props属性的基础用法

index.js页面

import React from 'react';
import ReactDOM from 'react-dom';
import Parent from './Parent';
var obj={
    name : 'tom',
    age : 10,
    sex : '男'
};
ReactDOM.render(<Parent {...obj}></Parent>, document.getElementById('root'));

Parent.js页面

import React from 'react';
import User from './User';
class Person extends React.Component{
    render(){
        return(
            <div>
                <p>Person展示：{this.props.name}，{this.props.age}，{this.props.sex}</p>
            </div>
        );
    }
}

export default Person;

注意：

return 返回标签时，最外层只能用一个标签
要暴露出组件

2.3 props属性的特点

1.每个组件对象都会有props（properties的简写）属性

2.组件标签的所有属性都保存在props中

3.内部读取某个属性值：this.props.propertyName

4.作用：通过标签属性从组件外向组件内传递数据（只读 read only）

5.对props中的属性值进行类型限制和必要性限制

三、state 属性

3.1 state 属性概述

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

3.2 state 属性的基础用法

index.js页面

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

class Person extends React.Component{
	//构造方法
    constructor(){
        super();
        this.state = {
            name: 'tom'
        }
    }

    render(){
        //state属性是可修改的
        this.state.name = 'jack';
        return (
        <h1>{this.state.name}</h1>
        );
    }
}

ReactDOM.render(<Person />, document.getElementById('root'));

3.3 设置状态:setState

setState(object nextState[, function callback])
不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑

四、props和state属性的区别

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。而子组件只能通过 props 来传递数据。
State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。
Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。

五、refs属性

5.1 refs属性概述

1、React 支持一种非常特殊的属性 Ref ，用来绑定到 render() 输出的任何组件上。
2、这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

5.2 refs属性基础用法

index.js页面

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

class Example extends React.Component {
  handleClick() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  }
  render() {
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick.bind(this)}
        />
      </div>
    );
  }
}
 
ReactDOM.render(<Example><Example/>,document.getElementById('root'));

六、父子组件传值

6.1 父传子

6.1.1 步骤

1、父组件中使用子组件标签，在标签中定义属性 eg : < Son mess=‘hello’ / >
2、子组件中通过 this.props.mess 获取值

6.1.2 案例

index.js页面

import React from 'react';
import ReactDOM from 'react-dom';
import Father from './Father';

ReactDOM.render(<Father></Father>, document.getElementById('root'));

Father.js页面

import React from 'react';
import Son from './Son';

class Father extends React.Component{
    render(){
        return(
            <React.Fragment>
                <h1>Father页面</h1>
                <Son mess="hello react"></Son>
            </React.Fragment>
        )
    }
}

export default Father;

Son.js页面

import React from 'react';

class Son extends React.Component{
    render(){
        return(
            <React.Fragment>
				{this.props.mess}
            <React.Fragment>
        )
    }
}

export default Son;

补充：

<React.Fragment><React.Fragment>标签在react中类似于空标签的用法不占位置

6.2 子传父

6.2.1 步骤

在父组件中声明函数用于接收子组件的传值    sonMessage(msg){ }

父组件中使用子组件标签，在标签中自定义属性    < Son mess={this.sonMessage} / >

子组件中调用父组件的方法     this.props.mess(传值)

在父组件的方法中就可以拿到值     sonMessage(msg){ //msg就是子组件传来的值 }

6.2.2 案例

index.js页面

import React from 'react';
import ReactDOM from 'react-dom';
import Father from './Father';

ReactDOM.render(<Father></Father>, document.getElementById('root'));

Father.js页面

import React from 'react';
import Son from './Son';

class Father extends React.Component{
    qiqi(msg){
        console.log('S.js内容：'+msg);
    }
    render(){
        return(
            <React.Fragment>
                <h1>Father页面</h1>
                <Son mess={this.qiqi}></Son>
            </React.Fragment>
        )
    }
}

export default Father;

Son.js页面

import React from 'react';

class Son extends React.Component{
    render(){
        return(
            <React.Fragment>
				{this.props.mess('S1.js中的内容……')}
            </React.Fragment>
        )
    }
}

export default Son;

七、兄弟组件传值

7.1 步骤

S1.js 的数据要在 S2.js 中展示
1、S1.js --> F.js （参考子传父步骤）
2、F.js --> S2.js （参考父传子步骤）

7.2 案例

index.js页面

import React from 'react';
import ReactDOM from 'react-dom';
import Father from './Father';

ReactDOM.render(<Father></Father>, document.getElementById('root'));

Father.js页面

import React from 'react';
import Son from './Son';
import Son2 from './Son2';

//父组件
class Father extends React.Component{
    constructor(){
        super();
        this.state={
            mess:''
        }
    }
    //用于接收Son.js组件的数据函数
    qiqi(msg){
        console.log('S.js内容：'+msg);
        this.setState({
            mess : msg
        });
    }
    render(){
        return(
            <React.Fragment>
                <h1>Father页面</h1>
                <Son mess={this.qiqi.bind(this)}></Son>
                <Son2 messdata={this.state.mess}></Son2>
            </React.Fragment>
        )
    }
}

export default Father;

Son.js页面

import React from 'react';

//子组件
class Son extends React.Component{
	//按钮点击事件函数
    yiyi(){
        this.props.mess('S1.js中的内容……')
    }
    render(){
        return(
            <React.Fragment>
            	// 按钮绑定yiyi事件函数
                <button onClick={this.yiyi.bind(this)}>获取内容</button>
            </React.Fragment>
        )
    }
}

export default Son;

Son2.js页面

import React from 'react';

//子组件
class Son2 extends React.Component{
    render(){
        return(
            <React.Fragment>
                <p> S2.js页面内容：
                    {this.props.messdata}
                </p>
            </React.Fragment>
        )
    }
}

export default Son2;

参考链接：
React Props
React State(状态)

yiyiyiyi_

发布了7 篇原创文章 · 获赞 10 · 访问量 449

私信关注

React 组件介绍

React 组件 props 属性和 state 属性

内容大纲：

一、React 组件

1.1 React概述

1.2 React组件概述

1.3 React 组件的创建

1.3.1 使用函数定义了一个组件

1.3.1 使用 ES6 class 来定义一个组件

注意：

二、props属性

2.1 props属性概述

2.2 props属性的基础用法

注意：

2.3 props属性的特点

三、state 属性

3.1 state 属性概述

3.2 state 属性的基础用法

3.3 设置状态:setState

四、props和state属性的区别

五、refs属性

5.1 refs属性概述

5.2 refs属性基础用法

六、父子组件传值

6.1 父传子

6.1.1 步骤

6.1.2 案例

补充：

6.2 子传父

6.2.1 步骤

6.2.2 案例

七、兄弟组件传值

7.1 步骤

7.2 案例

猜你喜欢