10、React 中的组件通信、数据流动与项目搭建

React 中的组件通信、数据流动与项目搭建

1. 组件通信

在 React 里，若要管理多个组件间的状态，可创建一个有状态的父组件，其余部分使用轻量级子组件。使用 Redux 的 React 应用通常会减少有状态组件的创建，而是将状态集中存于单一位置（即存储库）。

当构建简单的评论框组件时，你会发现可以用其他组件来创建新组件，这也是 React 的强大之处。它能让你用子组件轻松构建其他组件，还能清晰表达组件间的 “is-a” 和 “has-a” 关系。

但组件间如何通信呢？许多框架和库都有特定的通信方法，比如 Angular.js 或 Ember.js 中会用服务来实现不同部分的通信。不过 React 不用服务，若要组件间通信，需传递 props，传递 props 时主要做两件事：
- 访问父组件的数据（可以是状态或 props）
- 将数据传递给子组件

下面是一个父子组件关系及所有者 - 被所有者关系的示例代码，可在 https://codesandbox.io/s/pm18mlz8jm 运行：

import React from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";

const UserProfile = props => {      
  return <img src={`https://source.unsplash.com/user/${props.username}`} />;
};
User