zoukankan      html  css  js  c++  java
  • React 模块与组件

    React 模块与组件

    几个重要概念理解
    1). 模块与组件
      1. 模块:
        理解: 向外提供特定功能的js程序, 一般就是一个js文件
        为什么: js代码更多更复杂
        作用: 复用js, 简化js的编写, 提高js运行效率
      2. 组件:
        理解: 用来实现特定功能效果的代码集合(html/css/js)
        为什么: 一个界面的功能太复杂了
        作用: 复用编码, 简化项目界面编码, 提高运行效率
    2). 模块化与组件化
      1. 模块化:
        当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
      2. 组件化:
        当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用

    react组件化开发

    基本理解和使用

      1). 自定义的标签: 组件类(函数)/标签

      2). 创建组件类

       //方式1: 无状态函数(简单组件, 推荐使用)
      function MyComponent1(props) {
      return <h1>自定义组件标题11111</h1>
      }
      //方式2: ES6类语法(复杂组件, 推荐使用)
      class MyComponent3 extends React.Component {
        render () {
          return <h1>自定义组件标题33333</h1>
          }
      }

      3). 渲染组件标签

    ReactDOM.render(<MyComp />, cotainerEle)

      4). ReactDOM.render()渲染组件标签的基本流程
      React内部会创建组件实例对象/调用组件函数, 得到虚拟DOM对象将虚拟DOM并解析为真实DOM插入到指定的页面元素内部

    例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/react.development.js"></script>
        <script src="../js/react-dom.development.js"></script>
        <script src="../js/babel.min.js"></script>
    </head>
    <body>
    <div id="test1"></div>
    <div id="test2"></div>
    <script type="text/babel">
        //1、定义组件
        /*方式1: 工厂函数组件(简单组件)*/
        function MyComponent(){
            return <h2>工厂函数组件(简单组件)</h2>
        }
        /*方式2:  ES6类组件(复杂组件)*/
        class MyComponent2 extends React.Component {
            render() {
                console.log(this) // MyComponent2的实例对象
                return <h2>ES6类组件(复杂组件)</h2>
            }
        }
        //2、渲染组件标签
        ReactDOM.render(<MyComponent/>,document.getElementById('test1'))
        ReactDOM.render(<MyComponent2/>,document.getElementById('test2'))
    </script>
    </body>
    </html>

  • 相关阅读:
    【架构】如何设计支持多租户的数据库?
    maven的仓库:本地和远程
    maven私服
    MSA(微服务简介)
    json数据的格式
    shiro的原理理解
    异构的概念?大数据量的异构处理?
    面试之多线程通信
    面试之并发的解决方案
    进程与线程的简单理解
  • 原文地址:https://www.cnblogs.com/jnba/p/12513062.html
Copyright © 2011-2022 走看看