React学习笔记 - 组件

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是只读的,不能对其进行修改。

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

阅读 925

helloword
happy coding

hello world

502 声望
20 粉丝
0 条评论

hello world

502 声望
20 粉丝
宣传栏