组件挂载的方式
属性和状态
属性 (props)
props是正常从外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改,但是你可以通过父组件主动重新渲染的方式来传入新的 props
属性是描述性质、特点的,组件自己不能随意更改。
总的来说,在使用一个组件的时候,可以把参数放在标签的属性当中,所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件,需要通过函数的参数来接收props
import React, { Component,Fragment } from 'react'
import PropTypes from 'prop-types'
const Item = ( props ) => {
// console.log( 'item', props ) 函数式组件要通过 props参数来接收外部传入的属性
return (
<div>
你好吗
</div>
)
}
const Title = ( props ) => {
return (
<div>
{ props.children }
</div>
)
}
class DataComponent extends Component{
// props的内部设置 类属性
static defaultProps = { // React 16版本以上props才是这么定义
taiji: 'red'
}
/*
React 15版本props内部设置形式
getDefaultPorps () {
return {
taiji: 'red'
}
}
*/
render () {
console.log( this ) //实例( 实例化类之后得到的 )
return (
<Fragment>
home
<p> 外部传入属性: { this.props.name } </p>
<p> 内部设置的属性:{ this.props.taiji } </p>
<Item name = 'item-name'></Item>
<Title>
这里是title
</Title>
</Fragment>
)
}
}
DataComponent.propTypes = {
// 属性: 属性的类型
name: PropTypes.string,
taiji: PropTypes.string
}
export default DataComponent
状态(state)
状态就是组件描述某种显示情况的数据,由组件自己设置和更改,也就是说由组件自己维护,使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)
-
定义状态的方式
- 第一种
import React, { Component } from 'react' import ReactDOM from 'react-dom' class App extends Component { state = { name: 'React', isLiked: false } render () { return ( <div> <h1>欢迎来到{this.state.name}的世界</h1> <button> { this.state.isLiked ? '取消' : '收藏' } </button> </div> ) } } ReactDOM.render( <App/>, document.getElementById('root') )
-
第二种(推荐)
import React, { Component } from 'react' import ReactDOM from 'react-dom' class App extends Component { constructor() { super() this.state = { name: 'React', isLiked: false } } render () { return ( <div> <h1>欢迎来到{this.state.name}的世界</h1> <button> { this.state.isLiked ? '取消' : '收藏' } </button> </div> ) } } ReactDOM.render( <App/>, document.getElementById('root') )
属性VS状态
相似点:都是纯js对象,都会触发render更新,都具有确定性(状态/属性相同,结果相同)
不同点:
- 属性能从父组件获取,状态不能
- 属性可以由父组件修改,状态不能
- 属性能在内部设置默认值,状态也可以
- 属性不在组件内部修改,状态要改
- 属性能设置子组件初始值,状态不可以
- 属性可以修改子组件的值,状态不可以
state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState方法进行更新,setState 会导致组件的重新渲染。
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数,组件内部无法控制也无法修改。除非外部组件主动传入新的 props,否则组件的 props 永远保持不变。
如果搞不清 state 和 props 的使用场景,记住一个简单的规则:尽量少地用 state,多用 props。
没有 state 的组件叫无状态组件(stateless component),设置了 state 的叫做有状态组件(stateful component)。因为状态会带来管理的复杂性,我们尽量多地写无状态组件,尽量少地写有状态的组件。这样会降低代码维护的难度,也会在一定程度上增强组件的可复用性。