React - 基础学习

React基础

React更新视图的流程 是 一层一层查找 到对应的视图做更新

如何生成React工程

bash 复制代码
//    生成简单的react
npx create-react-app react-app

//    生成typescript的react
npx create-react-app react-app-ts --template typescript

React的基本能力

父子组件

bash 复制代码
//    父组件App
import './App.css';
import FuncCom from './basic/FuncCom';
import ClassCom from './basic/ClassCom';

function App() {
    return (
        <div className="App">
            <ClassCom />
            <FuncCom />
        </div>
        
    );
}

export default App;


//    子组件ClassCom
import React, { Component } from 'react';

export default class ClassCom extends Component {

    render() {
        return (
            <div>ClassCom</div>
        )
    }
}


//    子组件FuncCom
export default function FuncCom() {
    return (
        <div>FuncCom!!</div>
    )
}

State

state等同于vue中的data state需要用特定的方法进行更新

类组件

必须使用setState方法。

State的值,互相不影响

第二个参数,是一个callback,能拿到state

注意 这里setState是一个异步方法

函数调用在类组件的坑

js 复制代码
import React, { Component } from 'react';

export default class ClassCom extends Component {

    constructor(props) {
        super(props);

        this.state = {
            number: 0,
            message: '1223'
        }
    }
    
    handleClick() {
        this.setState({
            number: this.state.number + 1
        })
    }
    handleClickFn = function() {
        this.setState({
            number: this.state.number + 1
        })
    }
    
    handleFn = () => {
        this.setState({
            number: this.state.number + 1
        })
    }

    render() {
        
        const { number, message } = this.state;
        return (
            <div>
                ClassCom{ number }
                {/** 这里如果要调用原型上的方法 那么需要bind this 要不然调用这个函数内会找不到this */}
                <button onClick={this.handleClick.bind(this)}>
                    {message}
                </button>
                {/** 同理 如果是函数时声明的变量也需要bind this */}
                <button onClick={this.handleClickFn.bind(this)}>
                    {message}
                </button>
                {/** 如果调用箭头函数 那么直接写就行了  */}
                <button onClick={this.handleFn}>
                    {message}
                </button>
            </div>
            
        )
    }
}

双向绑定

js 复制代码
import React, { Component } from 'react';

export default class ClassCom extends Component {

    constructor(props) {
        super(props);

        this.state = {
            number: 0,
            message: '1223'
        }
    }
    
    handleChange = (event) => {
        this.setState({
            message: event.target.value
        })
    }
    
    
    render() {

        const { number, message } = this.state;
        return (
            <div>
                <input value={message} onChange={this.handleChange} />
            </div>
            
        )
    }
}

函数组件

js 复制代码
[state, dispatch] = useState(initState);
//    state: 作为组件的状态,提供给UI渲染视图;
//    dispatch: 用户修改state的方法,同时触发组件更新;
//    参数可以是函数,可以不是,如果是函数,就更新为函数执行的结果,如果不是,直接更新为值。
//    initState:初始值
//    可以是函数可以不是 同dispatch一样


import { useState } from "react"

export default function FuncCom() {

    const [ number, setNumber ] = useState(0);
    const [ message, setMessage ] = useState('哈哈哈');

    function handleSetNumber(type) {
        if (type === '+') {
            setNumber(number + 1)
        } else {
            setNumber((v) => v - 1)
        }
    }

    return (
        <div>
            FuncCom!!
            { number }
            { message }

            <button onClick={() => handleSetNumber('+')}>
                加
            </button>
            <button onClick={() => handleSetNumber('-')}>
                减
            </button>
        </div>
    )
}

Props 父子组件传值工具

js 复制代码
//    父组件App
import './App.css';
import FuncCom from './basic/FuncCom';
import ClassCom from './basic/ClassCom';

function App() {
    return (
        <div className="App">
            <ClassCom name="123" count={111} />
            <FuncCom
                name="123"
                count={111}
                slotxx={(<div>6666</div>)}
            />
        </div>
        
    );
}

export default App;


//    子组件ClassCom
import React, { Component } from 'react';

export default class ClassCom extends Component {
    
    constrcutor(props) {
        super(props);
    }
    
    render() {
        return (
            <div>
                { this.props.name }
                { this.props.count }
                ClassCom
            </div>
        )
    }
}


//    子组件FuncCom
export default function FuncCom(props) {
    return (
        <div>
            { props.name }
            { props.count }
            FuncCom!!
            {props.slotxx}
        </div>
    )
}

声明周期

类组件
js 复制代码
//    初始化阶段
//    constructor执行
//    初始化state, 初始化一些其他数据

//    合并state和props
static getDerivedStateFromProps(props, state) {
    return {
        ...
    }
}

//    类似于vue的beforeMount
//    如果类中有了getDerivedStateFromProps 那么这个声明周期不会被执行
componentWillMount() {
}

//    类似于vue的mounted
componentDidMount() {
}


/** 更新阶段  */
/** getDerivedStateFromProps存在的时候 该函数不执行  */
componentWillReceiveProps() {
}
/** 相当于是一个拦截器,返回bool值  */
shouldComponentUpdate() {
}
componentWillUpdate() {}
componentDidUpdate() {}

/** 销毁阶段  */
componentWillUnmount() {}

函数组件

js 复制代码
//    useEffect
//    有点像vue中的watch
useEffect(() => destory, deps);


import React, { useEffect, useState } from 'react';
export default function FuncLifeCycle(props) {
    
    const [ state, setState ] = useState(() => {
        console.log('getDerivedStateFromProps');
    });
    
    useEffect(() => {
        console.log('componentDidMount');
        return () => {
            console.log('componentWillUnMount');
        }
    }, [])
    
    useEffect(() => {
        console.log('componentWillReceiveProps');
    }, [props])
    
    useEffect(() => {
        console.log('componentDidUpdate');
    })
}

Effect是如何模拟声明周期的?

上述代码即可!

相关推荐
GISer_Jing14 分钟前
React中Element、Fiber、createElement和Component关系
前端·react.js·前端框架
今天只学一颗糖1 小时前
Linux学习笔记--查询_唤醒方式读取输入数据
笔记·学习
GIS学姐嘉欣1 小时前
【智慧城市】2025年中国地质大学(武汉)暑期实训优秀作品(5):智慧矿产
学习·gis·智慧城市·webgis
折翼的恶魔1 小时前
前端学习之样式设计
前端·css·学习
IT_陈寒2 小时前
JavaScript性能优化:3个被低估的V8引擎技巧让你的代码提速50%
前端·人工智能·后端
云飞云共享云桌面2 小时前
SolidWorks服务器多人使用方案
大数据·运维·服务器·前端·网络·电脑·制造
艾小码2 小时前
从Hello World到变量数据类型:JavaScript新手避坑指南
前端·javascript
街尾杂货店&3 小时前
css word-spacing属性
前端·css
千叶寻-3 小时前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
光影少年8 小时前
angular生态及学习路线
前端·学习·angular.js