React 组件(Components) 和 属性(Props)

组件(Components)

• 从定义上来说， 组件就像JavaScript的函数。组件可以接收任意输入(称为"props")， 并返回 React 元素，用以描述屏幕显示内容。

1. 函数式组件和类组件

• 函数式组件

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

这个函数是一个合法的 React 组件，因为它接收一个 props 参数, 并返回一个 React 元素。 我们把此类组件称为"函数式(Functional)"组件， 因为从字面上看来它就是一个 JavaScript 函数。

你也可以用一个 ES6 的 class 来定义一个组件:

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

2. 渲染一个组件

<script type='text/babel'>
            const destination=document.querySelector('#app');
           //这里有个坑，函数式组件必须要大写。
            function Welcome(props) {
                return <h1>Hello, {props.name}</h1>;
            }
            const ele=<Welcome name="sara"/>
            ReactDOM.render(ele,destination);

        </script>

警告：
组件名称总是以大写字母开始。
举例来说, <div /> 代表一个 DOM 标签，而 <Welcome /> 则代表一个组件，并且需要在作用域中有一个 Welcome 组件。

3.构成组件

• 组件可以在它们的输出中引用其它组件

 function App() {
                return (
                        <div>
                            <Welcome name="Sara" />
                            <Welcome name="Cahal" />
                            <Welcome name="Edite" />
                            {ele}
                        </div>
                );
            }

警告：
组件必须返回一个单独的根元素。这就是为什么我们添加一个 <div> 来包含所有 <Welcome /> 元素的原因。

提取组件

• 不要害怕把一个组件分为多个更小的组件。
• 所有 React 组件都必须是纯函数，并禁止修改其自身 props 。