组件补充

最新推荐文章于 2024-11-10 16:56:06 发布

原创最新推荐文章于 2024-11-10 16:56:06 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了React中组件的创建及嵌套使用方法，并通过实例演示了如何传递Props给子组件，强调了Props的只读特性及其在保持组件纯净性方面的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件嵌套

<!DOCTYPE html>
    <html>

        <head>
            <meta charset="UTF-8" />
            <title>Hello World</title>
            <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
            <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        </head>

        <body>
            <div id="root"></div>
        </body>

    </html>
    <!--

        组件：组成的部件,可以接受任何props输入,并返回元素

    -->
    <script type="text/babel">

        // 1.1 创建一个基本的组件
        function Welcome(props){
            return (
                <div>
                    <p>{props.name}</p>
                </div>
            )
        }


        // 1.2 创建一个app组件,并使用Welcome组件
        function App(props){
            return (
                <div>
                    <Welcome name="1"></Welcome>
                    <Welcome name="2"></Welcome>
                    <Welcome name="3"></Welcome>
                </div>
            )
        }

        var element = <App></App>
        // 2. 组件的使用
        ReactDOM.render(
            element, 
            document.getElementById('root') 
        );

    </script>

总结

props是只读的

所有React组件都必须是纯函数，并禁止修改其自身props.

补充

纯函数

不会试图改变它们的输入，并且对同样的输入，始终可以得到相同的结果

function sum(a, b) {
  return a + b;
}

非纯函数

改变了自身的输入值

function withdraw(account, amount) {
  account.total -= amount;
}