關於 React Props 和 React States 的一些基礎知識科普

前端小學生董某發表於2020-04-03
React

問題一：什麼是 React Props？

w3schools.com 給出的定義是：

Props are arguments passed into React components.

Props are passed to components via HTML attributes.

React Props are like function arguments in JavaScript and attributes in HTML.
複製程式碼

React Props 可以被理解為是構建 React 元件所需的引數，和其他大部分高階語言的函式引數這個概念是十分接近的.從定義上來說,元件就像 JavaScript 的函式。元件可以接收任意輸入(稱為 props )， 並返回 React 元素，用以描述螢幕顯示內容。

問題二：如何使用 React Props？

import React from 'react'
import ReactDOM from 'react-dom'
function HelloMessage(props) {
    return <h1>Hello,{props.name}!</h1>;
}
 
const element = <HelloMessage name="Dongshufeng"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);
複製程式碼

在這個例子中， HelloMessage 這個元件的 name 屬性擁有了Dongshufeng 這個值

  1. 我們呼叫了 ReactDOM.render() 方法並向其中傳入了 元素。
  2. React 呼叫 HelloMessage 元件，並向其中傳入了 {name: 'Dongshufeng'} 作為 props 物件。
  3. Welcome 元件返回 <h1>Hello, Dongshufeng</h1>
  4. React DOM 迅速更新 DOM ，使其顯示為 <h1>Hello, Dongshufeng</h1>

預設 Props 的設定

我們可以通過元件類的 defaultProps 屬性為 props 設定預設值，例項如下：

import React from 'react'
import ReactDOM from 'react-dom'
function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
HelloMessage.defaultProps = {
    name: 'Dongshufeng'
};

const element = <HelloMessage/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);
複製程式碼

Props 的驗證

Props 驗證使用 propTypes，它可以保證應用元件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入資料是否有效。當向 props 傳入無效資料時，JavaScript 控制檯會丟擲警告。

以下例項建立一個 Mytitle 元件，屬性 title 是必須的且是字串，非字串型別會自動轉換為字串 ：

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types';
var title = "123";
//var title = 123;
class MyTitle extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.title}</h1>
    );
  }
}
MyTitle.propTypes = {
    title:PropTypes.string
}
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);
複製程式碼

這裡網頁上的顯示始終都是 123 沒有變化，但是按下 F12 檢視控制檯，會發現在 propTypes 不符時，控制檯會發出型別不符的警告

Props 訊息傳遞

Props are also how you pass data from one component to another, as parameters.

Props 可以在通過一個元件為另一個元件傳遞資料:

import React from 'react'
import ReactDOM from 'react-dom'
//import PropTypes from 'prop-types';
class Car extends React.Component {
    render() {
      return <h2>I am a {this.props.brand}!</h2>;
    }
  }
class Garage extends React.Component {
    render() {
      return (
        <div>
        <h1>Who lives in my garage?</h1>
        <Car brand="Ford" />
        </div>
      );
    }
}
ReactDOM.render(<Garage />, document.getElementById('example'));
複製程式碼

當然也可以設定變數傳遞：

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand}!</h2>;
  }
}
class Garage extends React.Component {
  render() {
    const carname = "Ford";
    return (
      <div>
      <h1>Who lives in my garage?</h1>
      <Car brand={carname} />
      </div>
    );
  }
}
ReactDOM.render(<Garage />, document.getElementById('example'));
複製程式碼

也可以作為一個物件來傳遞訊息：

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.brand.model}!</h2>;
  }
}
class Garage extends React.Component {
  render() {
    const carinfo = {name: "Ford", model: "Mustang"};
    return (
      <div>
      <h1>Who lives in my garage?</h1>
      <Car brand={carinfo} />
      </div>
    );
  }
}
ReactDOM.render(<Garage />, document.getElementById('example'));
複製程式碼

Props 是隻讀的

無論用函式或類的方法來宣告元件, 它都無法修改其自身 props

所有 React 元件都必須是純函式，並禁止修改其自身 props 。

問題三：什麼是 React States？

w3cschool.com 給出的定義是：

React components has a built-in state object.

The state object is where you store property values that belongs to the component.

When the state object changes, the component re-renders.

React 的狀態物件是內建的，這個狀態物件儲存這個元件的屬性值，當狀態物件更新時，元件將會重新渲染。React 把元件看成是一個狀態機（State Machines）。通過與使用者的互動，實現不同狀態，然後渲染 UI，讓使用者介面和資料保持一致。

React 裡，只需更新元件的 state，然後根據新的 state 重新渲染使用者介面（不要操作 DOM）。

The state object is initialized in the constructor:

要設定狀態物件，要在元件的建構函式中進行，以這個例子來看：

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            firstname: "Dong",
            lastname:"shufeng",
            school:"NEAU",
            age:"23"        
        };
    }
    changeSchool = () =>{        
        this.state.school == "NEAU"?this.setState({school:"HIT"}):this.setState({school:"NEAU"})
    }
    render() {
      return (
        <div>
            <h1>Self introduction<hr></hr>  {this.state.firstname}
            {this.state.lastname} is {this.state.age} years old
            and  in {this.state.school}
            </h1>
            <button type = "button" onClick  = {this.changeSchool}>
              changeSchool
            </button>            
        </div>
      );
    }
  }  
ReactDOM.render(<Me />, document.getElementById('example'));
複製程式碼

w3cschool.com 中給出的關於 state 的用法總結：

To change a value in the state object, use the this.setState() method.

When a value in the state object changes, the component will re-render, meaning that the output will change according to the new value(s).

Always use the setState() method to change the state object, it will ensure that the component knows its been updated and calls the render() method (and all the other lifecycle methods).
複製程式碼

在執行這個例子的時候，總結了以下幾點經驗：

  1. state 可作為一個容器容納某個元件的很多屬性
  2. 為了使用 state ,也就是說把 state 中的屬性值渲染到頁面上，我們應該在 render() 方法中返回一個狀態物件
  3. JSX 中一定要嚴格將標籤閉合， HTML 中可以不計較的標籤閉合問題一定不能掉以輕心
  4. 正確使用三元表示式，也可以完成條件判斷的功能

相關文章