React基础-组件&Props

概念

React组件可将UI切分成一些独立的、可复用的部件，这样修改局部的样式就不会造成全局污染，也方便了团队协做。

React组件从概念上看就像是函数，它可接收任意的输入值（props）,并返回一个在页面上需要展示的React元素。

定义组件

（1）函数定义组件（JavaScript函数）

function Welcome (props) {

    return <h1>Hello, {props.name}</h1>;

}

实例代码：

页面效果：

（2）ES6 class 定义组件

class Welcome extends React.Component {

    render() {

        return <h1>Hello, {this.props.name}</h1>;

}

 自定义组件

// 自定义组件

function Welcome(props) {

    return <h1>Hello, {props.name}</h1>;

}

const element = <Welcom name="LJ" />;

ReactDOM.render(

    element,

    document.getElementById('root')

);

! 注意：组件名称必须以大写字母开头。

组合组件

组件可以在它输出中引用其他组件。在React应用中，按钮、表单、对话框以及整个屏幕的内容都可被表示为组件。

// 创建一个App组件，用来多次渲染Welcom组件

function Welcome(props) {

    return <h1>Hello,  {props.name}</h1>;

}

function MyApp() {

    return (

        <div>

            <Welcome name="LJ" />

            <Welcome name="Sara" />

             <Welcome name="Cahal" />

        </div>

    );

}

ReactDOM.render(<MyApp />,document.getElementById('root'));

! 注意：组件名称必须以大写字母开头。

! 注意：组件返回值只能有一个根元素。

Props的只读性

无论是使用函数或是类来声明一个组件，它都不能修改它自己的props值。

// 纯函数

function sum (a,b){

    return a+b;

}

类似于以上的这种函数称为"纯函数"，它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。

// 非纯函数

funciton winthdraw (account,amount){

    account.total -= amount;

}

！注意：React是非常灵活的，但它也有一个严格的规则——所有的React组件必须像纯函数那样使用它们的props。

参考网址：

组件&Props - React