当前位置：首页 > article >正文

react概念篇

article 2024/12/23 3:21:58

jsx

定义

jsx 又称JavaScript xml(xml一般指的是可扩展编辑语言)
jsx是react提供的语法糖，能让我们在JS中写HTML

语法

只有一个根元素
使用js变量时，用插值表单式 {}
dom元素的class改为了className（ className={‘div ’+active? ‘action’ : ’ '} ）

类组件

组件比是大写字母开头
构建函数是可选的（constructor 可以必写）
this.state 是状态
有生命周期函数
有this,在使用函数时注意this指向问题

react指向问题

问题：JS原有this指向问题
解决：可用bind来改变this指向

函数组件

function 定义组件：
1.没有生命周期
2.没有this
3.没有状态（可以用hooks来解决）

jsx扩展

jsx是js语法扩展，可以使用我们类似于HTML的形式去使用JS

jsx最终需要转换成JS代码。
babel将es6转化为es5,让更多浏览器支持

react作用

react 监听用户数据的更新，帮助我们去渲染视图。
render()函数实现了dom渲染的过程，这个过程我们可以分为两个阶段：
1.获取虚拟dom（jsx经过babel转义后的对象）
2.将虚拟dom转化为真实dom并插入到HTML文档中

react生命周期

定义：react从挂载到卸载的过程，我们称这个过程为react生命周期

react的生命周期分为三个阶段：挂载、更新、卸载

react 生命周期函数

定义： react在生命周期过程中，自动执行的一些函数，我们称这些函数为生命周期函数（钩子函数）

挂载阶段（当组件实例被创建并插入到dom中）

在react类组件中，挂载之前会调用他的构建函数constuctor()
(1)、所有的state都是来自于props
static.getDrivedStatFromProps
(2)、render
(3)、componentDidMount 会在组件挂载后（插入dom树中）立即调用，网络请求可以放在这个阶段

更新阶段

render()
更新阶段执行生命周期函数 componentDidUpdate

卸载阶段（组件从dom树被移除）

卸载阶段生命周期函数 componentWillUnMount

组件

因为react是单向数据流，值的传递是通过props传递（父组件传递数据给子组件，子组件通过父组件自定义的方法来修改父组件的状态）

组合组件（组件嵌套）

父子组件

父传子

函数组件：通过props传递

例：

function FunctionComponent(props) {
    console.log('函数组件',props);
    
    return ( 
        <div>函数组件</div>
     );
}

import FunctionComponent from "./functionComponent";
function App() {
    const name = '李四'
    return ( 
        <div>
            <h1>函数组件</h1>
            <FunctionComponent props={name}/>
        </div>
     );
}

export default App;

子传父

import { Component } from "react";
function FunctionComponent(props) {
    console.log('函数组件',props);
    
    return ( 
        <button onClick={props.props.addClick}>加一</button>
     );
}


class App extends Component {
    constructor(props) {
        super(props);
    }
    state = { 
        number: 1
     }
    render() { 
        return ( 
            <div>
                组件： {this.state.number}
                <FunctionComponent props={{'number' : this.state.number,'addClick' : this.addClick.bind(this)}}/>
            </div>
         );
    }
    addClick(){
        this.setState({
            number: this.state.number+1
        })
    }
}
 
export default App;

兄弟组件

传参

因为单向数据流，组件之间的通信是通过props层层传递的，太麻烦了，所以出现了context对象（相当于全局变量）
例：

import { Component, createContext, useContext } from "react";
const ValueContext = createContext();
function Son(props) {
    const {state} = useContext(ValueContext)
    return (
        <div>
            子组件{state.name}
        </div>
    )
}

function Father(props) {
    const {state} = useContext(ValueContext)
    
    return ( 
        <div>
            父组件{state.name}
            <Son props={props.props}/>
        </div>
     );
}

class App extends Component {
    constructor(props) {
        super(props);
    }
    state = { 
        name: '李三'
     }
    render() { 
        return ( 
            <div>
                组件通信
                <ValueContext.Provider value={{state:this.state}}>
                    <Father props={this.state.name}/>
                </ValueContext.Provider>
            </div>
         );
    }
}
 
export default App;