组件 & Props

Component And Props

• 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思

• 组件，从概念上类似于 JavaScript 函数，它接受任意的入参 Props，并返回用于描述页面展示内容的 React 元素

函数组件与class组件

• 定义组件最简单的方式就是编写 JavaScript 函数

• 也可以使用 ES6 的 class 来定义组件

  ```jsx harmony

function Welcome(props) { return Hello, {props.name} }

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

## 渲染组件

* 组件名称必须以大写字母开头
* 当 React 元素为用户自定义的组件时，它会将 JSX 所接收的属性 attributes 以及子组件 children 转换为单个对象传递给组件，这个对象被称为 props
```jsx harmony

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

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

)

• 在上面这个例子中发生了什么？

  1. 调用 ReactDOM.render() 函数，并传入 作为参数

  2. React 调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入

  3. Welcome 组件将 Hello, Sara 元素作为返回值

  4. React DOM 将 DOM 高效地更新为 Hello, Sara

组件组合

• 组件可以在其输出中引用其他组件

• 通常来说，每个新的 React 应用程序的顶层组件都是 APP 组件

提取组件

• 将组件拆分为更小的组件

• 建议从组件自身的角度命名 props，而不是依赖调用组件的上下文命名

Props 的只读性

• 组件无论是使用函数声明还是通过 class声明，都决不能修改自身的 props

• 所有 React 组件都必须像纯函数一样保护它们的 props 不被修改