【React】函数式组件和类式组件的用法和逻辑

fangyuan__2023-09-26 12:40

组件的使用

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

注意：

组件名必须是首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签 < />
渲染类组件标签的基本流程
React 内部会创建组件实例对象
调用render()得到虚拟 DOM ,并解析为真实 DOM
插入到指定的页面元素内部

函数式组件

ts 复制代码

//1.先创建函数，函数可以有参数，也可以没有，但是必须要有返回值 返回一个虚拟DOM
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
//2.进行渲染
ReactDOM.Render(<Welcom name = "ljc" />,document.getElementById("div"));

上面的代码经历了以下几步

我们调用 ReactDOM.render() 函数，并传入作为参数。
React 调用 Welcome 组件，并将 {name: 'ljc'} 作为 props 传入。
Welcome 组件将 Hello, ljc 元素作为返回值。
React DOM 将 DOM 高效地更新为 Hello,ljc。

类式组件

ts 复制代码

class MyComponent extends React.Component {
	// 如果组件不需要接收props，推荐这样写，不用写构造器
    state = {isHot:false}
    render() {
        const {isHot} = this.state
        return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h1>
    }
    //以下代码，直接把函数赋值给变量，相当于在类的实例对象上添加了这么一个方法，另外，箭头函数自身没有this，会逐层往上找，找到类的实例对象（注意这里必须是箭头函数）
    //自定义方法要用赋值语句加箭头函数，方便让this指向当前实例对象
    changeWeather = ()=>{
        const isHot = this.state.isHot
        this.setState({isHot:!isHot})
    }
}
ReactDOM.render(<MyComponent/>,document.querySelector('.test'))

注意点：

组件中的 render 方法中的 this 为组件实例对象
组件自定义方法中由于开启了严格模式，this 指向 undefined 如何解决

通过 bind 改变 this 指向

推荐采用箭头函数，箭头函数的 this 指向

state 数据不能直接修改或者更新