React 元素渲染组件定义的两种方式

最新推荐文章于 2024-10-16 17:29:59 发布

吃不胖的猫o(=^ェ^=)m

最新推荐文章于 2024-10-16 17:29:59 发布

阅读量294

点赞数

分类专栏： React 文章标签： react javascript

本文链接：https://blog.csdn.net/yueqin0512/article/details/113173227

版权

React 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客探讨了React中的元素渲染和组件定义。首先介绍了如何渲染元素，特别是利用JavaScript函数封装当前时间。接着详细阐述了组件定义的两种方法：一是通过编写JavaScript函数，二是使用ES6类，并在`render`方法中返回React元素。在组件定义中，强调了组件名称需以大写字母开头，以及React如何处理props和DOM更新。

摘要由CSDN通过智能技术生成

元素渲染

当前时间

<div id="example"></div>
<script type="text/babel">
    function tick() {
      const element = (
        <div>
          <h2>{new Date().toLocaleDateString()}.</h2>
          <h2>{new Date().toLocaleString()}.</h2>
          <h2>{new Date().toString()}.</h2>
          <h2>{new Date().toTimeString()}.</h2>
          <h2>{new Date().toLocaleTimeString()}.</h2>
          <h2>{new Date().toUTCString()}.</h2>
        </div>
      );
      ReactDOM.render(
        element,
        document.getElementById('example')
      );
    }
    
    setInterval(tick, 1000);
</script>

在这里插入图片描述

将当前时间封装为函数

<div id="example"></div>
<script type="text/babel">
    function Clock(props) {
      return (
        <div>
          <h2>{props.date.toLocaleTimeString()}.</h2>
        </div>
      );
    }
    
    function tick() {
      ReactDOM.render(
        <Clock date={new Date()} />,
        document.getElementById('example')
      );
    }
    setInterval(tick, 1000);
</script>

组件定义的两种方式

1.定义组件最简单的方式就是编写 JavaScript 函数。
注意：组件名称必须以大写字母开头

1.调用 ReactDOM.render() 函数,传入作为参数
2.React 调用 Welcome 组件,并将 {name: ‘Sara’} 作为 props 传入
3.Welcome 组件将<h1>Hello, Sara</h1> 元素作为返回值
4.React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>

<div id="example"></div>
<script type="text/babel">
    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }      
    const element = <Welcome name="Sara" />

    ReactDOM.render(
      element,
      document.getElementById('example')
    );
</script>

2.除了函数外我们还可以创建一个React.Component的 ES6 类，该类封装了要展示的元素，需要注意的是在 render() 方法中，需要使用 this.props 替换 props

<div id="example"></div>
<script type="text/babel">
      class Clock extends React.Component {
        render() {
          return (
            <div>
              <h2>{this.props.data.toLocaleTimeString()}</h2>
            </div>
          )
        };
      }

      function tick() {
        ReactDOM.render(
          <Clock data={new Date()}/>,
          document.getElementById('example')
        )
      }

      setInterval(tick, 1000);
</script>