组件的数据挂载方式(属性,状态)
属性(props)(数据不经常改动)
props
是正常从外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改,但是你可以通过父组件主动重新渲染的方式来传入新的 props
属性是描述性质、特点的,组件自己不能随意更改。
之前的组件代码里面有props
的简单使用,总的来说,在使用一个组件的时候,可以把参数放在标签的属性当中,所有的属性都会作为组件 props
对象的键值。通过箭头函数创建的组件,需要通过函数的参数来接收props
:
App组件:
外组件传入属性
function App() {
return (
<div className="App">
<List></List>
<DataComponent name = 'laopeng' flag = { false }></DataComponent>
</div>
);
}
DataComponent组件:
import React, { Component,Fragment } from 'react'
class DataComponent extends Component{
// props的内部设置 类属性
static defaultProps = { // React 16版本以上props才是这么定义
color: 'red'
}
/*
React 15版本props内部设置形式
getDefaultPorps () {
return {
color: 'red'
}
}
*/
render(){
return(
<Fragment>
home
<p> 外部传入属性: { this.props.name } </p>
<p> 内部设置的属性:{ this.props.color } </p>
</Fragment>
)
}
}
在使用一个组件的时候,可以把参数放在标签的属性当中,所有的属性都会作为组件 props
对象的键值。通过箭头函数创建的组件,需要通过函数的参数来接收props
:
//app.js
import React from 'react';
import './App.css';
// import StyleComponent from './style_component'
import DataComponent from './data_component'
function App() {
return (
<div className="App">
{/* <StyleComponent></StyleComponent> */}
<DataComponent abc="hahaha"></DataComponent>
</div>
);
}
export default App;
const Item = ( props ) => {
// console.log( 'item', props ) 函数式组件要通过 props参数来接收外部传入的属性[DataComponent传来的属性]
return (
<div>
你好吗
</div>
)
}
class DataComponent extends Component{
render () {
return (
<Fragment>
<Item name = 'item-name'></Item>
<Title>
这里是title
</Title>
</Fragment>
)
}
}
props.children
要在自定义组件的使用嵌套结构,就需要使用 props.children 。在实际的工作当中,我们几乎每天都需要用这种方式来编写组件。
import React, { Component,Fragment } from 'react'
const Title = ( props ) => {
return (
<div>
{ props.children }//显示Title组件里面的内容
</div>
)
}
class DataComponent extends Component{
render () {
return (
<Fragment>
<Title>
这里是title
</Title>
</Fragment>
)
}
}
export default DataComponent
使用prop-types检查props
React其实是为了构建大型应用程序而生, 在一个大型应用中,根本不知道别人使用你写的组件的时候会传入什么样的参数,有可能会造成应用程序运行不了,但是不报错。为了解决这个问题,React提供了一种机制,让写组件的人可以给组件的props
设定参数检查,需要安装和使用prop-types:
数据验证
yarn add prop-types
import React, { Component,Fragment } from 'react'
import PropTypes from 'prop-types'
class DataComponent extends Component{
// props的内部设置 类属性
static defaultProps = { // React 16版本以上props才是这么定义
color: 'red'
}
render () {
console.log( this ) //实例( 实例化类之后得到的 )
return (
<Fragment>
<p> 外部传入属性: { this.props.abc} </p>
<p> 内部设置的属性:{ this.props.color } </p>
</Fragment>
)
}
}
DataComponent.propTypes = {
// 属性: 属性的类型
abc: PropTypes.string,
color: PropTypes.string
}
export default DataComponent
状态(数据频繁改变)
状态就是组件描述某种显示情况的数据,由组件自己设置和更改,也就是说由组件自己维护,使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)
组件自己的状态只能自己改动
定义state
第一种方式
import React,{Component} from 'react'
class DataComponent extends Component{
state = {//定义DataComponent组件的状态
girlChara:'萝莉',
boyChara:'开朗'
}
render(){
return(
<div>
<p>状态:{this.state.girlChara}</p>
<p>状态:{this.state.boyChara}</p>
</div>
)
}
}
另一种方式(推荐)
import React,{Component} from 'react'
class DataComponent extends Component{
constructor(){
super()
this.state = {//定义DataComponent组件的状态
nba: '猛龙',
girlChara:'萝莉',
boyChara:'开朗'
}
}
render(){
return(
<div>
<p>状态:{this.state.girlChara}</p>
<p>状态:{this.state.boyChara}</p>
<p>状态:{this.state.nba}</p>
</div>
)
}
}
this.props
和this.state
是纯js对象,在vue中,data属性是利用Object.defineProperty
处理过的,更改data的数据的时候会触发数据的getter
和setter
,但是React中没有做这样的处理,如果直接更改的话,react是无法得知的,所以,需要使用特殊的更改状态的方法setState
。
setState(更改状态)
通过点击事件修改状态
import React, { Component} from 'react'
class DataComponent extends Component{
// state = {
// girlChara:'萝莉',
// boyChara:'开朗'
// }
constructor(){
super()
this.state = {
girlChara:'萝莉',
boyChara:'开朗' ,
nba:'猛龙'
}
}
change () {
console.log(this)//undefined这里的this改变了通过bind来重新指向实例
this.setState({
nba:'勇士'
})
}
change = () =>{//箭头函数绑定this
this.setState({
nba:'勇士'
})
}
render () {
return(
<div>
{/* <button onClick = { this.change.bind(this) }> 改变状态 </button> */}//把this重新指向实例
<button onClick={this.change}>改变状态</button>
<p>{this.state.girlChara}</p>
<p>{this.state.boyChara}</p>
<p>{this.state.nba}</p>
</div>
)
}
}
setState
有两个参数
第一个参数可以是对象,也可以是方法【return一个对象】,我们把这个参数叫做updater
-
参数是对象
change () { console.log(this)//undefined这里的this改变了通过bind来重新指向实例 this.setState({ nba:'勇士' }) }
-
参数是方法
change(){ this.state( (prevstate,props) =>{ console.log(prevstate)//{girlChara: "萝莉", boyChara: "开朗", nba: "猛龙"}先前的状态 console.log(props)//{abc: "hahaha"}获取组件的属性 return { nba:'勇士' } }) }
注意的是这个方法接收两个参数,第一个是上一次的state, 第二个是props
setState
是异步的,所以想要获取到最新的state,没有办法获取,就有了第二个参数,这是一个可选的回调函数
change(){
this.state( (prevstate,props) =>{
console.log(prevstate)//{girlChara: "萝莉", boyChara: "开朗", nba: "猛龙"}先前的状态
console.log(props)//{abc: "hahaha"}获取组件的属性
return {
nba:'勇士'
}
},()=>{//这是一个回调函数
console.log('回调内层')
})
console.log('回调外层')
}
属性vs状态
相似点:都是纯js对象,都会触发render更新,都具有确定性(状态/属性相同,结果相同)
不同点:
- 属性能从父组件获取,状态不能
- 属性可以由父组件修改,状态不能
- 属性能在内部设置默认值,状态也可以
- 属性不在组件内部修改,状态要改
- 属性能设置子组件初始值,状态不可以
- 属性可以修改子组件的值,状态不可以
state
的主要作用是用于组件保存、控制、修改自己的可变状态。state
在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改。你可以认为 state
是一个局部的、只能被组件自身控制的数据源。state
中状态可以通过 this.setState
方法进行更新,setState
会导致组件的重新渲染。
props
的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数,组件内部无法控制也无法修改。除非外部组件主动传入新的 props
,否则组件的 props
永远保持不变。
如果搞不清 state
和 props
的使用场景,记住一个简单的规则:尽量少地用 state
,多用 props
。
没有 state
的组件叫无状态组件(stateless component),设置了 state 的叫做有状态组件(stateful component)。因为状态会带来管理的复杂性,我们尽量多地写无状态组件,尽量少地写有状态的组件。这样会降低代码维护的难度,也会在一定程度上增强组件的可复用性。