React學習（三）-元件使用

阿新 • • 發佈：2021-10-08

一.元件

　　React可以將模組拆分為多個元件，用分而治之的思想，讓各個元件專注於實現某個功能。在設計上，符合高內聚、低耦合原則。高內聚是元件內部實現自己的邏輯，像展示頁面的jsx，定義行為的js，甚至是樣式css。低耦合是，各個元件相互依賴關係要弱化，每個元件儘量獨立。

二.元件互動

　　定義一個Home元件。

var React = require('react');

class Home extends React.Component {
    constructor(props) {
        super(props);
        //定義資料
        this 
.state = {
            text: "this is home"
        };
    }

    render() {
        return <div>
            {this.state.text}
        </div>;
    }
}

export default Home;

　　在其它元件中引用Home元件。

var React = require('react');
import Home from './component/Home.jsx'

class App extends React.Component {
    constructor() {
        super();
         
//定義資料
        this.state = {
            text: "hello world"
        };
    }

    render() {
        return <div>
            <Home></Home>
        </div>;
    }
}

export default App;

　　這樣子輸出頁面就可以看到Home元件的內容。那元件間該如何通訊？這裡就講用props的方式。

　　元件有state和props兩種狀態值，state是內部值，props是外部傳進來的值。

//引用Home元件
render() {
    return <div>
        <Home text="byebye world"></Home>
    </div>;
}

class Home extends React.Component {
    constructor(props) {
        super(props);
        //定義資料
        this.state = {
            text: this.props.text
        };
    }

    render() {
        return <div>
            {this.state.text}
        </div>;
    }
}

　　在引用Home元件時，在Home標籤上帶上屬性來傳值，在Home元件內的建構函式接收到this上。

　　父元件通過props將值傳給子元件。而子元件想將值傳給父元件，則需要父元件通過props將自己的函式傳給子元件，由子元件呼叫父元件的函式。

//父元件
class App extends React.Component {
    constructor() {
        super();
        //定義資料
        this.state = {
            text: "hello world",
            count: 0
        };
    }

    handleClick(count) {
        this.setState({
            count: count
        });
    }

    render() {
        return <div>
            父元件：{this.state.count}
            <Home text="byebye world" click={this.handleClick.bind(this)} count={this.state.count}></Home>
        </div>;
    }
}

//子元件
class Home extends React.Component {
    constructor(props) {
        super(props);
        //定義資料
        this.state = {
            text: this.props.text,
            count: this.props.count
        };
    }

    handleClick(e) {
        var count = this.state.count + 1;
        this.setState({count:count});
        this.props.click(count);

        //注意這種寫法會有延遲，因為setState方法在這裡是非同步的，count值還是0。或者改用setState的回撥方法
        // this.setState({
        //     count: this.state.count + 1
        // });
        // this.props.click(this.state.count);
    }

    render() {
        return <div>
            {this.state.text}
            子元件：{this.state.count}
            <input type="button" onClick={this.handleClick.bind(this)} />
        </div>;
    }
}