源文链接：https://zh-hans.reactjs.org/docs/composition-vs-inheritance.html
Hello World
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
JSX
一个 JavaScript 的语法扩展.。
- const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>; - 在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，
2 + 2，user.firstName或formatName(user)都是有效的 JavaScript 表达式。 - JSX 也是一个表达式。
元素渲染
1.React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。
- React 只更新它需要更新的部分。
组件 & Props
- 定义组件最简单的方式就是编写 JavaScript 函数：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
- 你同时还可以使用 ES6 的 class 来定义组件：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
3.Props 的只读性。所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
4.渲染组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
State & 生命周期
- 不要直接修改 State。（this.setState）
- State 的更新可能是异步的。
- State 的更新会被合并。
- 数据是向下流动的。
事件处理
- React 事件的命名采用小驼峰式（camelCase），而不是纯小写。使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
- this.handleClick = this.handleClick.bind(this);bind绑定this
条件渲染
React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。
列表&Key
- key 只是在兄弟节点之间必须唯一
- key 会传递信息给 React ，但不会传递给你的组件。如果你的组件中需要使用 key 属性的值，请用其他属性名显式传递这个值。即props.key读取不到key的值。
表单
受控组件
- <input type="text">, <textarea> 和 <select> 之类的标签都非常相似—它们都接受一个 value 属性，你可以使用它来实现受控组件。
- 你可以将数组传递到 value 属性中，以支持在 select 标签中选择多个选项：
<select multiple={true} value={['B', 'C']}> - <input type="file" /> value只读，非受控。
- 当需要处理多个 input 元素时，我们可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作。
状态提升
在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”。
- 保留三位小数并四舍五入后的转换结果：Math.round(output * 1000) / 1000;round() 方法可把一个数字舍入为最接近的整数。
- 在 React 应用中，任何可变数据应当只有一个相对应的唯一“数据源”。通常，state 都是首先添加到需要渲染数据的组件中去。然后，如果其他组件也需要这个 state，那么你可以将它提升至这些组件的最近共同父组件中。你应当依靠自上而下的数据流，而不是尝试在不同组件间同步 state。
包含关系
使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中
- 少数情况下，你可能需要在一个组件中预留出几个“洞”。这种情况下，我们可以不使用 children，而是自行约定：将所需内容传入 props，并使用相应的 prop。
- React 元素本质就是对象（object），所以你可以把它们当作 props，像其他数据一样传递。这种方法可能使你想起别的库中“槽”（slot）的概念，但在 React 中没有“槽”这一概念的限制，你可以将任何东西作为 props 进行传递。
- 组合也同样适用于以 class 形式定义的组件。
React哲学
- 将设计好的 UI 划分为组件层级。
- 用 React 创建一个静态版本。（最好将渲染 UI 和添加交互这两个过程分开，props 是父组件向子组件传递数据的方式。即使你已经熟悉了 state 的概念，也完全不应该使用 state 构建静态版本。state 代表了随时间会产生变化的数据，应当仅在实现交互时使用。所以构建应用的静态版本时，你不会用到它。）
- 确定 UI state 的最小（且完整）表示。（该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。）
- 确定 state 放置的位置（React 中的数据流是单向的，并顺着组件层级从上往下传递。）
5.添加反向数据流。
