React——组件

一、注意事项

二、例子

函数组件

import React from "react"

/**
 * 返回一个组件，其实这个组件就是React对象
 * @param {传给组件的参数} props 
 * @returns 
 */
export function MyFuncComp(props) {
    return <div>组件内容：{props.number}</div>
}

类组件

import React from "react";

export default class MyClassComp extends React.Component {

    /**
     * 组件的构造函数，如果构造函数中没别的逻辑，可以不写，react会自动完成
     * @param {传递给组件的参数} props 
     */
    // constructor(props) {
    //     super(props);
    // }

    /**
     * 该方法必须返回react元素
     */
    render() {
        return <h1>类组件内容:{this.props.number}</h1>
    }
}

组件使用

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { MyFuncComp } from './components/MyFuncComp';
import MyClassComp from './components/MyClassComp';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MyFuncComp number="2"></MyFuncComp>
    <MyFuncComp number={4}></MyFuncComp>
    <MyFuncComp number={6}></MyFuncComp>
    <MyClassComp number={1} ennable></MyClassComp>
  </React.StrictMode>
);

三、组件状态

代码示例

import React, { Component } from 'react'

/**
 * 倒计时组件，使用者传入一个倒计时时间即可
 */
export class Tick extends Component {
    /**
     * 组件的状态对象，用来保存属于组件自身的一些属性，这是初始化的一种方式，也可以在构造函数中初始化
     */
    //   state = {
    //     left: this.props.number
    //   }

    constructor(props) {
        super(props);
        // 初始化组件状态，我们使用上面的方式初始化
        this.state = {
            left: this.props.number
        };
        // 实现倒计时功能
        const that = this;
        this.timer = setInterval(() => {
            // setState可能是异步的，所以不管是不是异步，我们都要当成异步来做
            that.setState({
                left: that.state.left - 1
            }, () => {
              // 状态完成之后
              if (that.state.left === 1) {
                clearInterval(that.timer);
              }
            });
            // 第二种写法
            // that.setState(state => {
             // 参数cur表示当前的状态值
             // 该函数的返回结果，会混合覆盖掉之前的状态
             // 该函数是异步执行
            // return {
            //   left: state.left - 1
            // }
            //})
        }, 1000)
    }

    render() {
        return (
            <div>
                倒计时为：{this.state.left}
            </div>
        )
    }
}

export default Tick