react的基础组件如何使用？react的基础组件和生命周期的介绍-js教程-PHP中文网

react的基础组件如何使用？react的基础组件和生命周期的介绍

寻∝梦

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

原创

1161 人浏览过

本篇文章主要的介绍了关于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多组件嵌套

组件可以通过参数传递
return中只允许一个标签容器，但是标签容器中可以存放无数个标签
注意项目的命名和文件的结构化

代码如下：

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的语法在编译上遵循规则：

遇到HTML标签(以<开头)就用HTML规则解析；
遇到代码块(以{开头)就用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>
        )
    }
}

登录后复制