阅读 78

组件开发之react组件开发方式,个人学习笔记

组件:组件页面的零件

React制作组件共有两种方式:

  • 函数式:制作简单组件
  • 类方式:制作复杂组件

1.函数式组件制作:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <!-- 快速创建元素 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 快速渲染元素到页面上  -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- babel编译器 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        // 组件的制作
        // 组件的命名:类似于vue,必须大驼峰命名
        // 原因:小写名称,容易和系统元素命名冲突
        function HelloWorld(){
            return <h2>hello world</h2>
        }
        // 系统检测到  <helloworld/>标签时,就会自动调用函数HelloWorld()
        // <HelloWorld/>:jsx语法 ,更加符合html的样式,容易被接受,
        // ReactDOM.render(HelloWorld(),app);本质与jsx相同
        ReactDOM.render(<HelloWorld/>,app);
        // 组件具有可复用特征:因为本质就是函数,
        let more=(
                <div><HelloWorld/>
                    <HelloWorld/>
                    <HelloWorld/>
                    </div>
        );
        // render方法会覆盖前面的方法
        ReactDOM.render(more,app)
    </script>
</body>
</html>
复制代码

函数式的传参:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <!-- 快速创建元素 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 快速渲染元素到页面上  -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- babel编译器 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        function Hello(props){
            return <h2>hello,{props.name},年龄{props.age}</h2>
        }
        // ReactDOM.render(Hello({name:'东东',age:'10'}),app)
        // jsx写法
        ReactDOM.render(<Hello name='东东'/>,app)
        let item=(
            <div>
                <Hello name='东东' age='10'/>
                <Hello name='东东' age='12'/>
                <Hello name='东东' age='10'/>
                </div>
        );
        ReactDOM.render(item,app)
    </script>
</body>
</html>
复制代码

2.类方式的组件:适合复杂功能的组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <!-- 快速创建元素 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 快速渲染元素到页面上  -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- babel编译器 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        // 面向对象写法:类名大驼峰,必须指定继承的父类
        class HelloWorld extends React.Component{
            // 内容只能是属性和方法
            render() {
                return <div>HelloWorld</div>
            }
        }
        ReactDOM.render(new HelloWorld().render(),app);
        // 简写:
        ReactDOM.render(<HelloWorld/>,app)
    </script>
</body>
</html>
复制代码

类组件的参数

<!-- 类组件的参数 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <!-- 快速创建元素 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 快速渲染元素到页面上  -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- babel编译器 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        class Hello extends React.Component{
            // 在面向对象中称为重写
            constructor(props) {
                // 子类重写父类的构造,需要用super来调用父类的构造,
              super(props)
            // 父类会隐藏性的:this.props=props
            // 这就是render()中的this.props的由来
            console.log(props);
            }
            
            render() {
                // this.props:来自于父类
              return <div>Hello,{this.props.name},{this.props.age}</div>
            }
        }
        ReactDOM.render(new Hello({ name:"东东",age:"10" }).render(),app)
        // 简写:
        ReactDOM.render(<Hello name="东东" />,app)
        let item=(
            <div>
                <Hello name="东东" age="10" />
                <Hello name="东2东" age="10"/>
                <Hello name="东3东" age="10"/>
                </div>
        );
        ReactDOM.render(item,app)
    </script>
</body>
</html>
复制代码
文章分类
前端
文章标签