React-组件 & Props

　　React元素可以只是DOM标签

const element = <div />;

　　React元素也可以是用户自定义的组件：

const element = <Welcome name="Sara" />;

　　组件可以将UI切分成一些的独立的、可复用的部件，这样就只需专注于构建每一个单独的部件。组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。

函数定义/类定义组件：

　　可以用JavaScript函数和ES6 class两种方式来定义组件
　　方法一：JavaScript函数：

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

　　该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。

　　方法二：ES6 class

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

注意：组件的返回值只能有一个根元素。组件名称必须以大写字母开头。　　

Props

　　当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。例如,这段代码会在页面上渲染出”Hello,Sara”:

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
    element,
    document.getElementById('root')
);

在这个例子中发生了什么：

　　我们对<Welcome name="Sara" />元素调用了ReactDOM.render()方法。
　　React将{name: 'Sara'}作为props传入并调用Welcome组件。
　　Welcome组件将<h1>Hello, Sara</h1>元素作为结果返回。
　　React DOM将DOM更新为<h1>Hello, Sara</h1>。

注意：Props具有只读性，无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。

猜你喜欢