State介绍
状态 state：使用this.state来引用，state本身就是状态的意思，状态指的是事物所处的状况，状况就是环境。
通常使用state存储简单的视图状态，比如说下拉框是否显示、单选 是否选中，或者需要自身去维护的变化数据等。
组件中用到的某个变量是不是应该作为组件State，可以通过下面的5条依据进行判断：
props从父组件中获取？如果是，那么它不是一个状态。render方法中使用？如果不是，那么它不是一个状态。这种情况下，这个变量更适合定义为组件的一个普通属性，例如组件中用到的定时器，就应该直接定义为this.timer，而不是this.state.timer。class Test extends React.Component{
constructor(props){
super(props);
//默认状态
this.state = {
isShow:true
}
}
render(){
return <div style={display:this.state.isShow?'block':'none'}>This is component!</div>
}
}
常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并（merge） data 到 this.state，并重新渲染组件。渲染完成后，调用可选的 callback 回调。大部分情况下不需要提供 callback，因为 React 会负责把界面更新到最新状态。
this.setState({
isShow:false
})
setState会触发diff算法：判断state和页面结果的区别，是否需要更新
props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点。
props在传递数据的过程中，是只读的不能修改。
1.父组件调用子组件时传入属性
2.子组件直接通过this.props.属性名即可拿到父组件传过来的值
//父组件
import React, { Component } from 'react'
import Child from './Child '
export default class Props extends Component {
state = {
title:"Hello world",
}
render() {
return (
<div>
<div><h3>首页</h3><Child title={this.state.title}></Child></div>
</div>
)
}
}
//子组件
import React, { Component } from 'react'
export default class Child extends Component {
render() {
console.log(this.props)
return (
<div>{this.props.title}</div>
)
}
}
使用展开语法，React就会自动把对象中的变量和值当作是属性的赋值
//父组件
import React, { Component } from 'react'
import Child from './Child '
export default class Props extends Component {
state = {
title:"Hello world",
name:"React"
}
render() {
return (
<div>
<div><h3>首页</h3><Child {...this.state}></Child></div>
</div>
)
}
}
//子组件
import React, { Component } from 'react'
export default class Child extends Component {
render() {
console.log(this.props)
return (
<div>{this.props.title}</div>
)
}
}
1.父组件调用子组件时传入函数属性
2.子组件直接通过this.props.fun()即可调用父组件传过来的函数
//父组件
import React, { Component } from 'react'
import Child from './Child '
export default class Props extends Component {
state = {
title:"Hello world",
}
trigger(){
return "Hello React"
}
render() {
return (
<div>
<div><h3>首页</h3><Child title={this.state.title} fun={this.trigger}></Child></div>
</div>
)
}
}
//子组件
import React, { Component } from 'react'
export default class Child extends Component {
render() {
console.log(this.props)
return (
<div>{this.props.title}</div>
<div>{this.props.fun()}</div>
)
}
}
引入prop-types用来校验父组件传递过来值的类型
1.propTypes用来验证类型和是否必传
2.defaultProps:用来设置未传参时的默认值
import React, { Component } from 'react'
import PropTypes from "prop-types"
export default class Child extends Component {
render() {
return (
<div>{this.props.title}</div>
)
}
}
//类属性
Child.propTypes = {
title: PropTypes.string
}
Child.defaultProps= {
title: "Hello"
}
利用static静态属性将验证写在类的里面
import React, { Component } from 'react'
import PropTypes from "prop-types"
export default class Child extends Component {
//类属性
static propTypes = {
title: PropTypes.string
}
static defaultProps= {
title: "Hello"
}
render() {
return (
<div>{this.props.title}</div>
)
}
}
React PropTypes的种类有
PropTypes.array // 队列
PropTypes.bool.isRequired // Boolean 且必须
PropTypes.func // 函数
PropTypes.number // 数字
PropTypes.object // 对象
PropTypes.string // 字符串
PropTypes.node // 任何类型的: numbers, strings, elements 或者数组
PropTypes.element // React 元素
PropTypes.instanceOf(XXX) // 某种XXX类型的对象
PropTypes.oneOf(['foo', 'bar']) // 其中的一个字符串
PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.array]) // 其中的一种类型
PropTypes.arrayOf(React.PropTypes.string) // 某种类型的数组(字符串)
PropTypes.objectOf(React.PropTypes.string) // 元素是字符串的对象
PropTypes.shape({ // 是否符合指定格式的对象
color: React.PropTypes.string,
fontSize: React.PropTypes.number
});
PropTypes.any.isRequired // 可以是任何格式，且必要。
// 自定义格式，不符合的时候放回Error
// 不要用`console.warn` 或者 throw, 因为它在`oneOfType` 的情况下无效
customPropType: function(props, propName, componentName) {
if (!/^[0-9]/.test(props[propName])) {
return new Error('Validation failed!');
}
}
props 和 state 的相似点：
props 通过 defaultProps 属性设置默认值；state 直接在定义的时候设置初始值；props 和 state 的不同点：
总结：state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
