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.propsthis.state是純js物件,在vue中,data屬性是利用Object.defineProperty處理過的,更改​data的資料的時候會觸發資料的gettersetter,但是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
    }
} 
```