react 中一些知识点--defaultProps、prop-types、context

一、defaultProps：初始化外界属性值

static defaultProps = {
	initCount: 0 // 如果外界没有传递 initCount，则会将其值初始化为0
}

render() {
	return (
		<div>
			当前数量：{this.props.initCount}
		</div>
	)
}

静态属性 defaultProps：在组件创建之前，会先初始化默认的 props 属性，这在全局调用一次。
严格地说，这不是组件生命周期的一部分，在组件被创建并加载之后，首先调用 constructor 构造器中的 this.state = {} 来初始化组件的状态

所以，使用 defaultProps 设置的属性值，只会在 reder 的时候创建一次，不能够随着 state 的改变而改变

生命周期	调用次数	能否使用 setState()
static defaultProps = {}	1（全局调用1次）	否
this.state = {}	1	否
componentWillMount	1	是
render	>=1	否
componentDidMount	1	是
componentWillReceiveProps	>=0	是
shouldComponentUpdate	>=0	否

---

二、prop-types：规定外来属性的类型

安装

cnpm install prop-types 

使用

import PropTypes from 'prop-types'

export default class Counter extends React.Component{
	static propTypes = {
		initCount: PropTypes.number // 定义initCount为number类型
	}
}

当外来传入类型与propTypes中规定的类型不一致时，控制台将会报出错误

---

三、vue 和 react 中父子组件传参的比较

vue 和 react 中父子组件传参的比较

在 vue 中，父组件向子组件传普通属性和方法属性是区别对待的，普通属性使用 props 接收（在子组件中），方法使用
this.$emit(‘方法名’)传递（在父组件中）

在 react 中，普通类型的数据、方法，都是通过 props

四、context：父子孙组件间传值

由于父组件->子组件->孙子组件传参过于麻烦，所以使用 context：在父组件上共享一个 context 对象，在后代组件上就不需要在逐层传递了。

1、父组件中

import PropTypes from 'prop-types'

export default class Father extends React.Component{
	state = {
		color: 'red'
	}
	// 1.在父组件中，定义一个getChildContext函数（名称固），此函数必须返回一个对象（该对象就是要共享给子孙组件的数据）
	getChildContext() {
		return {
			color: this.state.color
		}
	}
	// 2.使用属性校验，规定一下传递给子组件的数据类型。需要定义一个静态的childContextType（名称固定）
	static childContextTypes = {
		color: PropTypes.string // 规定color类型为string
	}
}

2、子孙组件中

class Child extends React.Component{
	// 3.属性校验：校验父组件传来的数据的类型
	static contextTypes = {
		color: PropTypes.string
	}
	// 使用父组件中的属性数据
	render() {
		return (
			<div>
				这里是孙子组件：{this.context.color}
			</div>
		)
	}
}