react基础-属性和状态

组件挂载的方式

属性和状态

属性 （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更新，都具有确定性（状态/属性相同，结果相同）

  不同点：

  1. 属性能从父组件获取，状态不能
  2. 属性可以由父组件修改，状态不能
  3. 属性能在内部设置默认值，状态也可以
  4. 属性不在组件内部修改，状态要改
  5. 属性能设置子组件初始值，状态不可以
  6. 属性可以修改子组件的值，状态不可以

  state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState方法进行更新，setState 会导致组件的重新渲染。

  props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。

  如果搞不清 state 和 props 的使用场景，记住一个简单的规则：尽量少地用 state，多用 props。

  没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。