React 中组件数据挂载方式-属性 props 和状态 state 说明及区别_react componentdidmount中props是否有值

react 中通过 props 和 state 实现组件间的通信，对数据进行传递、操作。

1. 属性 props

在组件中可以通过 props 传递数据。

正常情况下，props是外部传入的，组件内部也可以通过一些方式来设置属性的默认值，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props。

通俗来讲，就是在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的参数来接收props。

来看一个使用 props 传参的例子：

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

//函数组件
function Box(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <Box name="React"/>;
 
ReactDOM.render(
    element,
    document.getElementById('root')
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.1 设置默认值 defaultProps

在类组件中，可以通过组件类的 defaultProps 属性为 props 设置默认值。在父组件没有指定其值时，会使用这个默认值。propTypes 类型检查发生在 defaultProps 赋值后，所以类型检查也适用于 defaultProps。

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

class Box extends React.Component {
	//方式一：在类的内部设置静态属性
	static defaultProps={
		name:'react'
	}
	render() {
		return (
			<h1>Hello, {this.props.name}，age:{this.props.age}</h1>
		);
	}
}

//方式二：在类的外面 设置defaultProps属性
Box.defaultProps = {
	age: 18
};
 
ReactDOM.render(
  <Box/>,
  document.getElementById('root')
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

1.2 props.children

每个组件都可以获取到 props.children。它包含组件的开始标签和结束标签之间的内容。类似vue中的插槽。

看下面这个例子：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Content extends Component {
  render() {
    return (
      <div>{this.props.children}</div>
    );
  }
}

class Title extends Component {
  render() {
    return (
      <div>欢迎进入{this.props.children} </div>
    );
  }
}

ReactDOM.render(
	<Content>
		<Title>React</Title>
		<p>这里是内容</p>
	</Content>,
	document.getElementById('root')
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

上面的代码中，在页面中渲染Content 的 props.children，最终会渲染出<Content></Content>标签中的所有内容，渲染页面的结果如下：

1.3 proptypes 类型检查

Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

React.PropTypes 在 React v15.5 版本后已经移到了prop-types 库。

在终端中执行下面的命令，安装 prop-types 插件
yarn add prop-types -S

使用：

1. 使用 import 导入 prop-types。
2. prop-types 只能在类组件中做验证，不能在函数组件中做验证。
3. 通过 类名.propTypes={}，来定义属性规则，固定写法，注意大小写。
4. 类名.propTypes={} 中，键名为属性名，值为对属性的验证规则，例如Proptypes.string等。
5. 可以指定一个自定义验证器。它在验证失败时应返回一个 Error 对象。自定义验证时，对象值为一个函数，函数的参数可以通过 arguments 打印。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Proptypes from 'prop-types';

class Box extends Component {
  render() {
    return (
      <div>
        姓名： {this.props.name}，年龄：{this.props.age}
      </div>
    );
  }
}

Box.propTypes={
	name:Proptypes.string.isRequired,	//表示name为字符串类型，isRequired 必须要传
	age:function(props,propName){	//自定义验证
		if(props[propName]<20){
            return new Error(
                'Invalid prop `' + propName + '` Because it Less than 20.'
              )
        }
	}
}

ReactDOM.render(
  <Box name="xiaoming" age={18} />,
  document.getElementById('root')
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

prop-types 的验证规则：

以上为 js 的原生类型

部分语法使用如下：

import PropTypes from 'prop-types';

Box.propTypes = {
  // 你可以让你的 prop 只能是特定的值，指定它为
  // 枚举类型。
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 一个对象可以是几种类型中的任意一个类型
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 可以指定一个数组由某一类型的元素组成
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 可以指定一个对象由某一类型的值组成
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // 可以指定一个对象由特定的类型值组成
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),
  
  // An object with warnings on extra properties
  optionalObjectWithStrictShape: PropTypes.exact({
    name: PropTypes.string,
    quantity: PropTypes.number
  }),   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2. 状态 state

state 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。

可以在类的构造函数中初始化状态 state，也可以在类中直接定义属性（下面2.1中的写法）来初始化状态 state 。通过 this.state 获取 state 中的数据内容。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Box extends Component {
  constructor() {
    super();
    this.state = {
      name: 'xiaoming',
      age: 18
    }
  }
  render() {
    return (
      <div>
        姓名： {this.state.name}，年龄：{this.state.age}
      </div>
    );
  }
}

ReactDOM.render(
  <Box />,
  document.getElementById('root')
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2.1 setState()

修改 state 中的数据内容，有以下三种方式：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Box extends Component {
    state={
        name:"xiaoming"
    }
    componentDidMount(){
    	//第一种修改方式
    	this.setState({name:'zhangsan'});

		//第二种修改方式
        this.state.name="sssss";
        this.setState({});

		//第三种修改方式
		this.setState((preState,props)=>{
		    return{
		        name:preState.name+'ccc'
		    }
		},()=>{ 
		    //数据修改完成后的回调函数
		})
    }
    render() {
      return (
        <div>姓名： {this.state.name}</div>
      );
    }
  }
  
ReactDOM.render(
  <Box />,
  document.getElementById('root')
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

当使用第二种方式的时候，虽然修改后的数据也在浏览器端渲染出来了，但是在控制台中会输出下面的警告信息，所以不建议直接使用 this.state 修改数据。

react 和 vue 中对 state 中数据的修改都是异步的，在vue中可以使用$nextTick() 方法，获取修改后的数据内容，在 react 中通过使用上面的第三种方法，获取修改后的数据内容。

setState 对数据的更新，会做 merge 合并的操作，即不会覆盖原来的数据内容，会把你提供的对象合并到当前的 state中。

2.2 状态提升

如果多个组件要实现数据共享，可以将数据提升到父组件中，对数据的操作统一在父组件中进行。

3. 属性和状态的区别

props 和 state 的相似点：

• 都是 js 对象，更新数据后会都会触发 render() 更新；
• 都可以设置默认值；props 通过 defaultProps 属性设置默认值；state 直接在定义的时候设置初始值；

props 和 state 的不同点：

• 属性是从父组件获取的，状态是在当前组件中定义的；
• 属性值只能由父组件修改，状态值只能由当前组件修改；
• 属性主要用于父组件和子组件间的通信，在组件内部是无法修改参数的；
• 状态是给自己用的，在内部初始化，被自己修改，在外部是不能修改的，内部通过 setState 修改，会触发render函数；

总结：state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。