react学习记录——组件

.map方法处理数组数据

在项目的开发过程中，数组的格式对组件进行渲染的情况经常出现，在React中，如果数组项item不为元素标签时，通常arr.map(function (item,index) { return 组件或元素 })遍历数组并渲染。

ReactDOM.render(
        <div>
        {
          names.map(function (name, index) {
            return <div key={index}>Hello, {name}!</div>
          })
        }
        </div>,
        document.getElementById('example')
      );

一、React.Component用法——函数组件与class组件

组件（Components）允许将UI拆分为独立的可重用的部分，并单独的考虑每个部分。

React.Component是一个抽象基类。这意味着直接引用React.Component是毫无意义的。可以实现一个它的子类，并且至少定义一个render()方法即可使用。

使用ES6中class定义一个React组件：

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

二、渲染组件

当 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>。

注意：组件名称必须以大写字母开头，React 会将以小写字母开头的组件视为原生 DOM 标签。

三、组合组件

将组件拆分为更小的组件

该组件用于描述一个社交媒体网站上的评论功能，它接收 author（对象），text （字符串）以及 date（日期）作为 props。
该组件由于嵌套的关系，变得难以维护，且很难复用它的各个部分。因此，让我们从中提取一些组件出来。

function formatDate(date) {
  return date.toLocaleDateString();
}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img
          className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">{props.text}</div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'https://placekitten.com/g/64/64',
  },
};
ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author}
  />,
  document.getElementById('root')
);

结果显示

四、Props 的只读性

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。来看下这个 sum 函数：

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

这样的函数被称为“纯函数”，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。

相反，下面这个函数则不是纯函数，因为它更改了自己的入参：

function withdraw(account, amount) {
  account.total -= amount;
}

React 非常灵活，但它也有一个严格的规则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。