Reac学习记录（一） - 函数式组件与类组件

最新推荐文章于 2024-11-02 15:48:17 发布

阿炜死了

最新推荐文章于 2024-11-02 15:48:17 发布

阅读量128

点赞数

文章标签： react.js javascript vue.js 函数式组件类组件

本文链接：https://blog.csdn.net/xzwwjl1314/article/details/121751392

版权

函数式组件

直接以函数的方式声明，并且返回的组件内容（JSX语法）]

以下代码拷贝可直接运行：

<body>
  <div id="app"></div>

  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">
    function Hello({ msg }) {
      return <h1>Hello，{msg}</h1>
    }
    ReactDOM.render(<Hello msg={'函数式组件'} />, document.querySelector('#app'))
  </script>
</body>

props的接收可以使用解构赋值

类组件

运用ES6的class语法实现，不熟悉的同学可以去看看文档。要继承React.Component类！！
以下代码拷贝可直接运行：

<body>
  <div id="todo"></div>

  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">
  
    class TodoList extends React.Component {
      render() {
        return (
          <ul>
            {
              this.props.data.map(item => <li key={item.id}>{item.name}</li>)
            }
          </ul>
        )
      }
    }

    const data = [{ id: 1, name: 'Vue' }, { id: 2, name: 'React' }, { id: 3, name: 'NuxtJS' }]

    ReactDOM.render(<TodoList data={data} />, document.querySelector('#todo'))
  </script>
</body>