react的基礎元件如何使用？ react的基礎元件和生命週期的介紹-js教程-PHP中文網

react的基礎元件如何使用？ react的基礎元件和生命週期的介紹

寻∝梦

發布： 2018-09-11 13:52:58

原創

1182 人瀏覽過

本篇文章主要的介紹了關於react中關於組件基礎與生命週期的詳細解釋，現在就讓我們一起來看這篇文章吧

本文主要講解React中關於組件的使用、React特有的JSX語法以及React生命週期的使用等，具體如下：

#React的虛擬DOM
##React元件
React多元件巢狀
React的語法—JSX
React的生命週期

1、React的虛擬DOM

innerHTML: render html string 重新建立所有DOM 元素
#Virtual DOM: render Virtual DOM diff 必要的DOM 更新
更詳細介紹，請查看React虛擬DOM詳解

2、React元件

1、建立元件：

1）沒有函數定義
2）ES5原生方式：React.createClass，（this自動綁定）
3）ES6形式：extends React.Component，（this來自super()）

#2、元件：是React的一個特性
3、元件對於模組化開發的重要性
4.元件的return函數中傳回的HTML節點有且只有一個
5、可以給外部使用的元件定義：export default class Header extends React.Component{}
6、元件導入：import Header from “XXX檔”;
7、網頁入口：ReactDOM.render(元件, document.getElementById(“ xxx”));

詳細程式碼如下：

const React = require(&#39;react&#39;);const ReactDOM = require(&#39;react-dom&#39;);
import ComponentHeader from "./component/header.js";
import ComponentFooter from "./component/footer.js";
import BodyIndex from "./component/bodyIndex.js";class Index extends React.Component {
    render() {        return (
            <p>
                <ComponentHeader />
                <BodyIndex />
                <ComponentFooter />
            </p> 
        )
    }
}
ReactDOM.render(
    <Index />,
    document.getElementById("wrap")
)

登入後複製

3、React多元件巢狀

const React = require(&#39;react&#39;);const ReactDOM = require(&#39;react-dom&#39;);

export default class ComponentHeader extends React.Component {
    render() {        return (
            <header>
                <h1>页面的头部</h1>
            </header>
        )
    }
}

登入後複製

4、React的語法—JSX內建表達式

##語法：{userName == “” ?

:
使用者名稱：${userName}}
註解的寫法：{/
/}
HTML顯示Unicode轉碼
HTML顯示特殊字元：dangerouslySetInnerHTML ={{__html : html}} —此方式存在XSS攻擊
JSX讀取陣列的時候，直接數組名，可以存取到所有的成員變數
JSX讀取物件時，仍遵循物件.屬性的操作
JSX的語法在編譯上遵循規則：

遇到程式碼區塊(以{開頭)就用JavaScript規則解析。

const React = require(&#39;react&#39;);const ReactDOM = require(&#39;react-dom&#39;);

export default class BodyIndex extends React.Component {
    render() {        var userName = "CSS3";        var bool = true;        var html = "HTML5 CSS3";        // JSX可以使用JS变量的，但是如果是一个数组,会访问到其内部的所有数组成员
        var arr = [
            <h2>HTML</h2>,
            <h3>HTML</h3>
        ];        // 解构赋值
        var obj = {
            userName,
            bool,
            html
        }    // JSX的语法在编译上遵循规则：
        // 遇到HTML标签(以<开头)就用HTML规则解析
        // 遇到代码块(以{开头)就用JavaScript规则解析
        return (
            <p>
                <p>{obj.userName}</p>
                <p>{arr}</p>
                <h1>页面的主体</h1>
                <p>{userName == "" ? `用户还没有登录` : `用户名：${userName}`}</p>
                {/*按钮*/}
                <p><input type="button" value={userName} disabled={bool} /></p>
                <p>{html}</p>
                <p dangerouslySetInnerHTML ={{__html : html}}></p>
            </p>
        )
    }
}

登入後複製