react之組件數據掛在方式

1、屬性(props)

組件間傳值，在React中是通過只讀屬性 props 來完成數據傳遞的。
props：接受任意的入參，並返回用於描述頁面展示內容的 React 元素。

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

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>
  	)
  }
}

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

1. props默認值
   由於設置了defaultProps， 不傳props也能正常運行，如果傳遞了就會覆蓋defaultProps的值
   • 類組件

   import React,{Component,Fragment} from 'react'
   import ReactDOM from 'react-dom'
    class Title extends Component{
        static defaultProps={
            name:'zh'
        }
        render(){
            return(
                <h1>{{this.props.name}}</h1>
            )
        }
    } 
   

   • 函數組件

   const Content =(props)=>{
       return (
           <p>{{props.name}}</p>
       )
   }
   Content.defaultProps={
       name:'fasgd'
   }
   

2. props.children
   我們知道使用組件的時候，可以嵌套。要在自定義組件的使用嵌套結構，就需要使用 props.children 。在實際的工作當中，我們幾乎每天都需要用這種方式來編寫組件。

   import React, { Component, Fragment } from 'react'
   import ReactDOM from 'react-dom'
   
   class Title extends Component {
   render () {
       return (
           <h1>歡迎進入{this.props.children}的世界</h1>
       )
   }
   }
   
   const Content = (props) => {
   return (
       <p>{props.children}</p>
   )
   }
   
   class App extends Component {
   render () {
       return (
           <Fragment>
           <Title>React</Title>
           <Content><i>React.js</i>是一個構建UI的庫</Content>
       </Fragment>
       )
   }
   }
   
   ReactDOM.render(
       <App/>,
   document.getElementById('root')
   )
   

3. prop-types檢查props
   React其實是為了構建大型應用程序而生, 在一個大型應用中，根本不知道別人使用你寫的組件的時候會傳入什么樣的參數，有可能會造成應用程序運行不了，但是不報錯。為了解決這個問題，React提供了一種機制，讓寫組件的人可以給組件的props設定參數檢查，需要安裝和使用prop-types:

   npm i prop-types -S

   • 類型： array、bool、func、number、object、string
   • React元素類型：element
   • 必填項：isRequired
   • 特定結構的對象： shape({})
   • 函數組件

   import PropTypes from 'prop-types'
   const Content=(props)=>{
       let {a,b}=props
       return (
           <div>{a}{b}</div>
       )
   }
   Content.propTypes={
       a:PropTypes.number,
       b:PropTypes.number
   }
   

   • 類組件

   import PropTypes from 'prop-types'
   class Conetnt extends Component{
       static propTypes={
           a:PropTypes.number,
           b:PropTypes.number
       }
       render(){
           let {a,b}=this.props
           return(
               <div>
               </div>
           )
       }
   }
   
   

2、狀態(state)

將state與表單項中的value值綁定在一起，有state的值來控制表單元素的值，稱為受控組件。
綁定步驟：

• 在state中添加一個狀態，作為表單元素的value值
• 給表單元素綁定change事件，將表單元素的值設置為state的值

1. 定義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')
   )
   

2. setstate
   this.props和this.state是純js對象,在vue中，data屬性是利用Object.defineProperty處理過的，更改​data的數據的時候會觸發數據的getter和setter，但是React中沒有做這樣的處理，如果直接更改的話，react是無法得知的，所以，需要使用特殊的更改狀態的方法setState。

   • 第一個參數可以是對象

   • 可以是方法return一個對象，我們把這個參數叫做updater

   • 參數是對象

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

   • 參數是方法
     參數1:上一次的state
     參數2:props

   this.setState((prevState, props) => {
       return {
           isLiked: !prevState.isLiked
       }
   })
   

   setState是異步的，所以想要獲取到最新的state，沒有辦法獲取，就有了第二個參數，這是一個可選的回調函數

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

3、屬性(props)VS狀態(state)

• 相似點：都是純js對象，都會觸發render更新，都具有確定性（狀態/屬性相同，結果相同）
• 不同點：
  1. 屬性能從父組件獲取，狀態不能
  2. 屬性可以由父組件修改，狀態不能
  3. 屬性能在內部設置默認值，狀態也可以
  4. 屬性不在組件內部修改，狀態要改
  5. 屬性能設置子組件初始值，狀態不可以
  6. 屬性可以修改子組件的值，狀態不可以

state

• 作用:用於組件保存、控制、修改自己的可變狀態。
• 組件內部初始化，可以被組件自身修改，而外部不能訪問也不能修改。
• 中狀態可以通過 this.setState方法進行更新，setState 會導致組件的重新渲染。

props

• 作用:讓使用該組件的父組件可以傳入參數來配置該組件。
• 它是外部傳進來的配置參數，組件內部無法控制也無法修改。
• 除非外部組件主動傳入新的 props，否則組件的 props 永遠保持不變

注意：盡量少地用 state，多用 props。
如果有多個組件共享一個數據，把這個數據放到共同的父級組件中來管理。

4、受控組件與非受控組件

受控組件

將state與表單項中的value值綁定在一起，state的值來控制表單元素的值，稱為受控組件。
步驟：

1. 在state中添加一個狀態，作為表單元素的value值
2. 給表單元素綁定change事件，將表單元素的值設置為state的值

```
<input type="text" value={this.state.username} onChange={this.inputChange.bind(this)} />

注：多表單元素需優化事件方法
this.setState({
    [e.target.name]: e.target.value
})
```

非受控組件

沒有和state數據源進行關聯的表單項，而是 借助ref，使用元素DOM方式獲取表單元素值
步驟:

1. 調用 React.createRef() 方法創建ref對象
2. 將創建好的 ref 對象添加到文本框中
3. 通過ref對象獲取到文本框的值

```
import React {Component} from 'react' //1
export default class User extends Component {
    constructor(props){
        super(props)
        <!-- 定義一個引用 -->
        this.username=React.createRef() //2
    }
    render(){
        return{
            <div>
                <input type='text' ref={this.username}/>//3
                <button onClick={this.addUser.bind(this)}></button>
            </div>
        }
    }
    addUser(){
        console.lof(this.username.current.value)//4
    }
} 
```