React初探

2022-2-21 14:45:45

#前端#react

34

前言

最近由于工作的需求，开始看起了react的文档，而入门一个新的框架最简单的就是从一个demo入手，正好react官方文档就有一个很好的示例demo。

正文

• 这是一个简单的todolist应用，正好包括了React的几大语法，我在此复现了一遍代码并且按照自己的理解增加了注释

import React from 'react';
// 类组件写法
class TodoApp extends React.Component {
    // 构造器，props为组件参数
    constructor(props) {
      // 在ES2015中，若想在子类中使用this，必须先调用super方法，React还会将props传给父组件
      // 调用super(props)把props传给React.Component构造函数，这样类组件才能接受参数数据集合props
      super(props);
      // 初始化组件内部状态
      this.state = { items: [], text: '' };
      // 绑定事件处理器
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
  
    // React的渲染函数，根据返回的值渲染页面元素
    render() {
      return (

        <div>
          <h3>TODO</h3>
          <TodoList items={this.state.items} />
          <form onSubmit={this.handleSubmit}>
            <label htmlFor=\"new-todo\">
              What needs to be done?
            </label>
            <input
              id=\"new-todo\"
              onChange={this.handleChange}
              value={this.state.text}
            />
            <button>
              Add #{this.state.items.length + 1}
            </button>
          </form>
        </div>
      );
    }
  
    // change事件处理器
    handleChange(e) {
      // 调用setState方法来重新设置该组件状态值
      this.setState({ text: e.target.value });
    }

     
  
    // submit事件处理器
    handleSubmit(e) {
      // 阻止浏览器提交表单时的默认行为，转而执行自定义操作
      e.preventDefault();
      if (this.state.text.length === 0) {
        return;
      }
      const newItem = {
        text: this.state.text,
        id: Date.now()
      };
      this.setState(state => ({
        items: state.items.concat(newItem),
        text: ''
      }));
    }
  }
  
  // 子组件
  class TodoList extends React.Component {
    render() {
      // 遍历props值来循环渲染列表
      return (
        <ul>
          {this.props.items.map(item => (
            <li key={item.id}>{item.text}</li>
          ))}
        </ul>
      );
    }
  }

// 返回组件
export default TodoApp;

• 接下来我们只要在页面中引入该ToDoList组件便可以使用