← 返回首页
React基础教程(七)
发表时间：2022-05-20 07:58:01
react组件

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

1.函数组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>

</head>
<body>
<div id="app">

</div>
<script type="text/babel">
    //函数组件
    function Hello(props) {
        return <div>这是我的第一个函数组件</div>;
    }

    const Hello2 = (props) => (<div>这是我的第二个函数组件</div>);

    function Hello3(props){
        return  <h1>我也是函数组件</h1>
    }
    const element = <Hello3/>;

    ReactDOM.render(<Hello/>, document.getElementById('app'))
    ReactDOM.render(<Hello2/>, document.getElementById('app'))
    ReactDOM.render(element, document.getElementById('app'))

</script>
</body>
</html>

如果我们需要向组件传递参数，可以使用 this.props 对象,实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>

</head>
<body>
<div id="app">

</div>
<script type="text/babel">
    //函数组件
    function Hello(props) {
        return (<div>这是我的第{props.index}个函数组件</div>)
    }

    const Hello2 = (props) => (<div>这是我的函数组件,名字为：{props.name}</div>)

    function Hello3(props){
        return  <h1>我也是函数组件,title:{props.title}</h1>
    }
    const element = <Hello3 title="hello world"/>;

    ReactDOM.render(<Hello index="2"/>, document.getElementById('app'))
    ReactDOM.render(<Hello2 name="test"/>, document.getElementById('app'))
    ReactDOM.render(element, document.getElementById('app'))


</script>
</body>
</html>

注意： ==在添加属性时， class属性需要写成className ，for属性需要写成htmlFor，这是因为class和 for都是JavaScript的保留字。==

函数组件如何绑定事件呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>

</head>
<body>
<div id="app">

</div>
<script type="text/babel">
    function App() {
        function handleClick() {
            alert('函数组件，事件触发')
        }
        return (<button onClick={handleClick}>点我</button>)
    }

    ReactDOM.render(<App/>, document.getElementById('app'))
</script>
</body>
</html>

2.类组件

有状态组件（类）组件，负责更新UI，让页面动起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>

</head>
<body>
<div id="app">

</div>
<script type="text/babel">
    //类组件
    //有状态组件（类）组件，负责更新UI，让页面动起来
    class Hello extends React.Component {
        render() {
            return (<button>我是类组件，点我</button>)
        }
    }
    ReactDOM.render(<Hello/>, document.getElementById('app'))

</script>
</body>
</html>

类组件如何绑定事件呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>

</head>
<body>
<div id="app">

</div>
<script type="text/babel">
    //类组件
    //有状态组件（类）组件，负责更新UI，让页面动起来
    class Hello extends React.Component {
        handleClick() {
            alert("类组件绑定事件，触发")
        }

        render() {
            return (<button onClick={this.handleClick}>我是类组件，点我</button>)
        }
    }

    ReactDOM.render(<Hello/>, document.getElementById('app'))

</script>
</body>
</html>

函数组件和class组件的区别

用构造函数创建出来的组件，叫做“无状态组件”； 用class关键字创建出来的组件，叫做“有状态组件”； 有状态组件和无状态组件之间的本质区别是有无state属性。

函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

区别 函数组件 类组件
是否有 this 没有 有
是否有生命周期 没有 有
是否有状态 state 没有 有

3.复合组件

我们可以通过创建多个组件来合成一个组件，即把组件按照功能进行分离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>

</head>
<body>
<div id="app">

</div>
<script type="text/babel">
    function Name(props) {
        return <h1>网站名称：{props.name}</h1>;
    }
    function Url(props) {
        return <h1>网站地址：{props.url}</h1>;
    }
    function Nickname(props) {
        return <h1>网站小名：{props.nickname}</h1>;
    }
    function App() {
        return (
            <div>
                <Name name="牛牛编程" />
                <Url url="https://www.simoniu.com" />
                <Nickname nickname="Robot" />
            </div>
        );
    }

    ReactDOM.render(
        <App/>,
        document.getElementById('app')
    );

</script>
</body>
</html>