03组件与props

1.组件理解

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。简单理解就是一个产生React元素的东西，同时它可以复用(个人理解)

2.定义组件的方式

函数组件：通过函数定义，返回React元素
```
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
```
该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

class组件：利用es6的class来定义组件

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

注意： 组件名称必须以大写字母开头。(区别DOM标签)

3.props

React 元素也可以是用户自定义的组件。当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
/*
    1.我们调用 ReactDOM.render() 函数，并传入 <Welcome name="Sara" /> 作   为参数。
    2.React 调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入。
    3.Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值。
    4.React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。
*/

4.props的只读性

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

function sum(a, b) {
  return a + b;
}

这样的函数被称为纯函数，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。相反，下面这个函数则不是纯函数，因为它更改了自己的入参：

function withdraw(account, amount) {
  account.total -= amount; //account对应的实参与account指向同一对象，account内部数据的改变会改变实参
}

React 非常灵活，但它也有一个严格的规则：

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。组件无法修改自己的props属性。

当然，应用程序的 UI 是动态的，并会伴随着时间的推移而变化。React提供一种新的概念，称之为 “state”。在不违反上述规则的情况下，state 允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容。