React学习笔记 - 组件

2024年4月15日 176次阅读 来源: xcwong

组件化是前端框架一个重要的思想，也是让我们偷懒的一个方法之一，?。

想象我们在写前端页面的时候，页面中的有些元素肯定是会被重复使用的。那么我们需要把这些元素打包成一个东西来重复使用，那么这个就是组件。

React中组件就是一个函数，它可以接受任意的输入值，我们称之为props。

React中定义组件的方式有两种，一种是javascript函数，一种是ES6 class的方式

组件的创建

javascript functiond的形式

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>
}

ES6 class 的形式

class Welcome extends React.Component {
    render(){
        return <h2>Hello, {this.props.name}</h2>
    }
}

组件的渲染

前面提到的React元素都是DOM标签，然而React元素也可以是用户自定义的组件。

const element = <Welcome name="sara" />

当React遇到用户自定义的组件的时候，他会将JSX属性作为单个对象props传递给该组件。例如:

function Welcome(props) {
    return <h2>Hello, {props.name}</h2>
}

const element = <Welcome name="sara" />
ReactDOM.render(
    element,
    document.getElementById('root')
);

组件树

一个组件可以在它的输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。
在一个React应用程序中，顶部是一个App组件，下面则是不断抽象的子组件，呈现树装结构。

Props的只读性

React组件中传入的props是只读的，不能对其进行修改。

但是应用的界面是随着时间动态变化的，组件需要动态变化则应该这么弄呢？

    原文作者：xcwong
    原文地址: https://segmentfault.com/a/1190000011266790
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞