React Component组件

最新推荐文章于 2023-06-06 08:54:38 发布

坚持吧骚年

最新推荐文章于 2023-06-06 08:54:38 发布

阅读量145

点赞数

本文链接：https://blog.csdn.net/huangning1995/article/details/91352404

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>03_component_basic</title>
</head>
<body>

<div id="example1">SDFSDFAASD</div>
<div id="example2"></div>
<div id="example3"></div>

<script src="../js/react.js"></script>
<script src="../js/react-dom.js"></script>
<script src="../js/babel.min.js"></script>

<script type="text/babel">
/*
1. 自定义组件(Component) :
  1). 定义组件
    //方式1: 工厂(无状态)函数(最简洁, 推荐使用)
    function MyComponent1() {
      return <h1>自定义组件标题11111</h1>
    }
    //方式2: ES6类语法(复杂组件, 推荐使用)
    class MyComponent3 extends React.Component {
      render () {
        return <h1>自定义组件标题33333</h1>
      }
    }
    //方式3: ES5老语法(不推荐使用了)
    var MyComponent2 = React.createClass({
      render () {
        return <h1>自定义组件标题22222</h1>
      }
    })
  2). 渲染组件标签
    ReactDOM.render(<MyComponent/>, document.getElementById('example'));
2. 注意:
  1). 返回的组件类必须首字母大写
  2). 虚拟DOM元素必须只有一个根元素
  3). 虚拟DOM元素必须有结束标签
3. ReactDOM.render()渲染组件标签的基本流程
  1). React内部会创建组件实例对象
  2). 得到包含的虚拟DOM并解析为真实DOM
  3). 插入到指定的页面元素内部
*/
  // 创建组件
  //方式1: 工厂(无状态)函数(最简洁, 推荐使用)
  function MyComponent1() {
    console.log('MyComponent1()');
    return <h1>工厂(无状态)函数(最简洁, 推荐使用)</h1>
  }
  // 方式2: ES6类语法(复杂组件, 推荐使用)
  class MyComponent2 extends React.Component{
    add(){
    }
    render(){
      console.log(this);
      return <h2>ES6类语法(复杂组件, 推荐使用)</h2>
    }
  }
  // 方式3: ES5老语法(不推荐使用了)
  var MyComponent3 = React.createClass({
    render : function() {
      return <h3>自定义组件标题22222</h3>
    }
  })
  // 渲染组件
  ReactDOM.render(<MyComponent1 />, document.getElementById('example1'));
  ReactDOM.render(<MyComponent2 />, document.getElementById('example2'));
  ReactDOM.render(<MyComponent3 />, document.getElementById('example3'));
</script>
</body>
</html>

组件名称要注意是大写开头,因为这可以和一般的html标签区分

render()方法会被React自动调用

function会被React自动调用

这是React底层自动实现的.

坚持吧骚年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React Component组件

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>03_component_basic</title></head><body><div id="example1">SDFSDFAASD</div&...
复制链接

扫一扫