前端React学习_react中const {}-CSDN博客

本文链接：https://blog.csdn.net/qq_39128254/article/details/128723062

文章展示了如何在React中使用工厂函数和构造函数创建组件。通过示例代码，解释了如何定义和使用函数组件以及ES6类组件，同时涉及到组件的状态管理和生命周期方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

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

  <div id="example"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/prop-types.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">

    class App extends React.Component {

      // 初始化状态
      state = {
        todos: [
          'A',
          'B',
          'C',
          'D'
        ]
      }

      // 向todos中添加todo
      addTodo = (todo) => {
        // 得到状态数据todos
        const {todos} = this.state
        // 更新状态数据
        todos.unshift(todo)
        // 更新状态
        this.setState({
          todos
        })
      }
      render () {
        console.log('App render()')
        // 读取内部的状态数据
        const {todos} = this.state

        return (
          <div>
            <h1>TODO LIST</h1>
            <Add size={todos.length} addTodo={this.addTodo}/>
            <List todos={todos}/>
          </div>
        )
      }
    }

    class Add extends React.Component {

      static propTypes = {
        size: PropTypes.number.isRequired,
        addTodo: PropTypes.func.isRequired
      }

      addTodo = () => {
        // 1. 得到输入的todo
        const todo = this.refs.todo.value
        // 2. 将todo添加到todos中
        this.props.addTodo(todo)
        // 3. 清除输入
        this.refs.todo.value = ''
      }

      render () {

        const {size} = this.props

        return (
          <div>
            <input type="text" ref="todo"/>
            <button onClick={this.addTodo}>Add #{size}</button>
          </div>
        )
      }
    }

    class List extends React.Component {

      // 声明接收哪些标签属性
      static propTypes = {
        todos: PropTypes.array.isRequired
      }

      render () {
        // 读取外部传入的属性数据
        const {todos} = this.props

        return (
          <ul>
            {
              todos.map((todo, index) => {
                return <li key={index}>{todo}</li>
              })
            }
          </ul>
        )
      }
    }
    
    
    ReactDOM.render(<App/>, document.getElementById('example'))


  /*  var fn = function () {

    }

    function fn2(f) {

    }
    fn2(fn)*/
  </script>
</body>
</html>

工厂函数、构造函数

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="example1"></div>
  <div id="example2"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">

    /*
    工厂函数:每次调用都返回一个新的对象
     */

    //1.定义组件
    /*方式1：工厂函数组件（简单组件）*/
    function MyComponent() {
        console.log('MyComponent', this)
        return <h2>工厂函数组件(简单组件)</h2>  //返回虚拟DDM
    }

    /*方式2： ES6类组件(复杂组件)*/
    class MyComponent2 extends React.Component{

      // 重写的回调函数，用来为组件标签提供虚拟DOM
      render () {
          console.log('render()', this, this === MyComponent2, this instanceof MyComponent2)
          return (
              <div>
                  <h2>ES6类组件(复杂组件)</h2>
                  <input type="text" />
              </div>
          )
      }
    }

    /*
    类：构造函数
    定义在类中的方法：由(类的)实例来条用，
     */

    console.log(typeof MyComponent2)

    //2.渲染函数组件标签:内部直接调用组件函数得到虚拟DOM
    ReactDOM.render(<MyComponent/>, document.getElementById('example1'))

    //渲染类组件标签，内部会自动创建类的实例，并调用render()得到需要渲染的虚拟DOM
    ReactDOM.render(<MyComponent2/>, document.getElementById('example2'))

  </script>
</body>
</html>