react组件中数据的挂载方式

组件的数据挂载方式

React中数据分为两个部分

1. 属性
2. 状态

个人经验： 频繁变化的就写成状态

属性(props)

props是正常从外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是可以通过父组件主动重新渲染的方式来传入新的 props
属性是描述性质、特点的，组件自己不能随意更改。

两种设置方式：
1. 外部传入
2. 内部初始化设置

总的来说，在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为组件 props 对象的键值。通过箭头函数创建的组件，需要通过函数的参数来接收props:

		class Title extends Component {
		  render () {
		    return (
		  		<h1>欢迎进入{this.props.name}的世界</h1>
		  	)
		  }
		}
		
		const Content = (props) => {
		  return (
		    <p>{props.name}是一个构建UI的库</p>
		  )
		}
		
		class App extends Component {
		  render () {
		    return (
		  		<Fragment>
		      	<Title name="React" />
		        <Content name="React.js" />
		      </Fragment>
		  	)
		  }
		}

设置组件的默认props

import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'

class Title extends Component {
  // 使用类创建的组件，直接在这里写static方法，创建defaultProps
  static defaultProps = {
    name: 'React'
  }
  render () {
    return (
  		<h1>欢迎进入{this.props.name}的世界</h1>
  	)
  }
}

const Content = (props) => {
  return (
    <p>{props.name}是一个构建UI的库</p>
  )
}

// 使用箭头函数创建的组件，需要在这个组件上直接写defaultProps属性
Content.defaultProps = {
  name: 'React.js'
}

class App extends Component {
  render () {
    return (
  		<Fragment>
        {/* 由于设置了defaultProps， 不传props也能正常运行，如果传递了就会覆盖defaultProps的值 */}
      	<Title />
        <Content />
      </Fragment>
  	)
  }
}

ReactDOM.render(
	<App/>,
  document.getElementById('root')
)

状态(state)

状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同**(自己管理)**

组件自己的状态只能自己更改

定义state

class App extends Component {

  state = {//第一种方法
    name: 'React',
    isLiked: false
  }

constructor() {//第二种方法  （推荐）
    super()
    this.state = {
      name: 'React',
      isLiked: false
    }
  }



  render () {
    return (
      <div>
        <h1>欢迎来到{this.state.name}的世界</h1>
        <button>
          {
            this.state.isLiked ? '❤️取消' : '?收藏'
          }
        </button>
      </div>
  	)
  }
}

this.props和this.state是纯js对象,在vue中，data属性是利用Object.defineProperty处理过的，更改​data的数据的时候会触发数据的getter和setter，但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法setState。

setState

isLiked 存放在实例的 state 对象当中，组件的 render 函数内，会根据组件的 state 的中的isLiked不同显示“取消”或“收藏”内容。下面给 button 加上了点击的事件监听。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
  constructor() {
    super()
    this.state = {			//状态
      name: 'React',
      isLiked: false
    }
  }
  handleBtnClick = () => {    
    this.setState({       //监听
      isLiked: !this.state.isLiked
    })
  }
  render () {
    return (
      <div>
        <h1>欢迎来到{this.state.name}的世界</h1>
        <button onClick={this.handleBtnClick}>   //点击事件
          {
            this.state.isLiked ? '❤️取消' : '?收藏'
          }
        </button>
      </div>
  	)
  }
}
ReactDOM.render(
	<App/>,
  document.getElementById('root')
)

setState有两个参数
第一个参数可以是对象，也可以是方法 ，然后return一个对象，我们把这个参数叫做updater

• 参数是对象

  this.setState({
    isLiked: !this.state.isLiked
  })
  

  • 参数是方法

  this.setState((prevState, props) => {   //方法接收两个参数，第一个是上一次的state, 第二个是props
    return {
      isLiked: !prevState.isLiked
    }
  })
  

  setState是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函数

this.setState((prevState, props) => {
 return {
   isLiked: !prevState.isLiked
 }
}, () => {
 console.log('回调里的',this.state.isLiked)
})

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

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

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

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

react性能优化一个方案： 就是多使用无状态组件（ 函数式组件 ）