React知识点回顾

最新推荐文章于 2023-01-15 13:37:49 发布

柒个M

最新推荐文章于 2023-01-15 13:37:49 发布

阅读量182

点赞数

分类专栏： D1：React

本文链接：https://blog.csdn.net/qq_38244874/article/details/118527199

版权

D1：React 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1、函数式组件 VS 类组件

区别：

    没有state，并且只包含一个render，上一个demo

function Square(props) {
    return (
        <button
            className="square"
            onClick={props.onClick}
        >
            {props.value}
        </button>
    )
}

类组件，就是以class类的形式封装的组件：

class Square extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: null
        }
    }

    render() {
        return (
            <button
                className="square"
                onClick={() => {
                    // this.setState({value: 'x'})
                    this.props.onClick()
                }}>
                {this.props.value}
            </button>
        );
    }
}

两者的区别就是，类组件需要使用this引用state，而函数式组件，接受一个参数props，直接调值；

2、父子传值：（传值、传方法）

父组件：

import React from 'react'
import Test from './Test'


class Demo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '张三'
        }
    }

    handleClick() {
        alert('xxx')
    }

    render() {
        return (
            <Test
                name={this.state.name}
                onClick={this.handleClick}
            />
        )
    }
}

子组件：通过props接收数据

import React from "react";

class Square extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <button
                className="square"
                onClick={() => {
                    this.props.onClick()
                }}>
                {this.props.name}
            </button>
        );
    }
}

export default Square;

3、react中动态渲染列表

render() {
        const arr = [[0, 1, 2], [3, 4, 5], [6, 7, 8]]
        return (
            <div>
               
                // 使用map遍历集合

                <div>
                    {
                        arr.map((item, index) => {
                            return <div key={index} className="board-row">
                                {
                                    item.map((list, index) => {
                                        return <span key={index}>
                                           {
                                               this.renderSquare(list)
                                           }
                                       </span>
                                    })
                                }

                            </div>
                        })
                    }
                </div>
                
                // 原始dom

                {/*<div className="board-row">*/}
                {/*    {this.renderSquare(0)}*/}
                {/*    {this.renderSquare(1)}*/}
                {/*    {this.renderSquare(2)}*/}
                {/*</div>*/}
                {/*<div className="board-row">*/}
                {/*    {this.renderSquare(3)}*/}
                {/*    {this.renderSquare(4)}*/}
                {/*    {this.renderSquare(5)}*/}
                {/*</div>*/}
                {/*<div className="board-row">*/}
                {/*    {this.renderSquare(6)}*/}
                {/*    {this.renderSquare(7)}*/}
                {/*    {this.renderSquare(8)}*/}
                {/*</div>*/}
            </div>
        );
    }

4、动态设置class

。。。。
constroct(props){
    super(props)

    this.status = {isCurrentIndex: 0}
}

jumpTo(move) {

     this.setState({
         
                isCurrentIndex: step,
              
            }
        );
}


render() {
    return (
        <button
            className={this.state.isCurrentIndex === move? "isActive" : "none"}
            onClick={() => this.jumpTo(move)}
        >{desc}</button>
    )
}

。。。。



.isActive {
    background-color: coral;
    color: #ffffff;
}