狀態(State) 和 屬性(Props)

props 是元件對外的介面，state 是元件對內的介面。 元件內可以引用其他元件，元件之間的引用形成了一個樹狀結構（元件樹），如果下層元件需要使用上層元件的資料或方法，上層元件就可以通過下層元件的props屬性進行傳遞，因此props是元件對外的介面。元件除了使用上層元件傳遞的資料外，自身也可能需要維護管理資料，這就是元件對內的介面state。根據對外介面props 和對內介面state，元件計算出對應介面的UI。 主要區別：

• State是可變的，是一組用於反映元件UI變化的狀態集合；
• Props對於使用它的元件來說，是隻讀的，要想修改Props，只能通過該元件的父元件修改。 在元件狀態上移的場景中，父元件正是通過子元件的Props, 傳遞給子元件其所需要的狀態。

React 屬性(Props)的使用

Props(屬性)預設為 “true”，當一個元件被注入一些屬性（Props ）值時，屬性值來源於它的父級元素，所以人們常說，屬性在 React 中是單向流動的：從父級到子元素。

元件像一個函式一樣，接受特定的輸入(props)，產出特定的輸出(React elements) 例項：

import React from 'react';
class NameCard extends React.Component{
    render(){
        const{name, number, isHuman, tags} = this.props
        return(
            <div className="alert alert-success">
                <h4>{name}</h4>
                <ul>
                    <li>電話：{number}</li>
                    <li>{isHuman ? '人類' : '外星生物'}</li>
                    <p>
                        { tags.map((tag, index) => (
                            <span className="badge badge-pill badge-primary" key={index}>{tag}</span>
                         ))}
                    </p>
                </ul>
            </div>
        )
    }
}
// ES6函式寫法  同上面展示效果一樣
const NameCard = (props) => {
    const { name, number, isHuman, tags } = props
    return (
        <div className="alert alert-success">
            <h4>{name}</h4>
            <ul>
                <li>電話：{number}</li>
                <li>{isHuman ? '人類' : '外星生物'}</li>
                <p>
                    {tags.map((tag, index) => (
                        <span className="badge badge-pill badge-primary" key={index}>{tag}</span>
                    ))}
                </p>
            </ul>
        </div>
    )
}
export default NameCard;
 

React 狀態(State)

• 元件內部的資料 可以動態改變
• this.setState() 是更新 state 的唯一方法

React 生命週期

React 表單