【React】react学习笔记02-面向组件编程

　　react学习笔记02-面向组件编程

 

　　面向组件编程，直白来说，就是定义组件，使用组件。

      以下内容则简单介绍下组建的声明与使用，直接复制demo观测结果即可。

      步骤：

      1、定义组件

　　　　  a、轻量组件-函数组件（局限性：只能用在没有state、prop属性的场景，后面会解释）

 

// 方式一：（轻量组件）函数组件
function ComponentA(){
    return <div>轻量组件A</div>
}

　　　　　b、复杂组件-类组件（ES6）

 

// 方式二：（复杂组件）类组件【ES6】
class ComponentB extends React.Component{
    render(){
        return    <div>类组件B</div>;
    }
}

 

 

      2、使用组件

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>

</head>
<body>
    <!--react基础库-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <!--bable转换库，ES语法以及Jax语法的转换-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <div id="content"></div>
    <div id="app1"></div>
    <div id="app2"></div>
    <div id="app3"></div>

    <script type="text/babel">
        //定义组件
        // 方式一：（轻量组件）函数组件
        function ComponentA(){
            return <div>轻量组件A</div>
        }
        //渲染组件标签
        ReactDOM.render(<ComponentA />,document.getElementById("app1"))
        // 方式二：（复杂组件）类组件【ES6】
        class ComponentB extends React.Component{
              render(){
                  return    <div>类组件B</div>;
              }
        }
        ReactDOM.render(<ComponentB />,document.getElementById("app2"))


    </script>


</body>
</html>　

 

 

　

 页面显示结果：

 

posted @ 2019-07-03 17:00  黑猫先生  阅读(320)  评论(2)  编辑  收藏  举报