react之元件資料掛在方式

久宇詩發表於2021-10-11
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
    }
} 
```

相關文章