JSX
JSX 是一个表达式，JSX的值是一个JS对象，因此可以再if for代码块中使用JSX，也可以将JSX赋给变量或把JSX当作参数传入，以及从函数中返回JSX
JSX 最终会被编译为 React.createElement() 函数调用，返回称为 “React 元素” 的普通 JavaScript 对象
元素渲染
React元素是开销极小的普通对象，React DOM 会负责更新DOM来与React元素保持一致
更新已渲染的元素：
React元素是不可变对象，更新UI的唯一方式是创建一个全新的元素，重新ReactDOM.render()
React 只更新它需要更新的部分
React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。
组件 & Props
定义组件两种方式：
通过JS函数：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
通过ES6 的 class：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
如何选择：如果你想写的组件只包含一个 render 方法，并且不包含 state，那么使用函数组件就会更简单。
注意： 组件名称必须以大写字母开头。
React 会将以小写字母开头的组件视为原生 DOM 标签
渲染组件：
const element = <Welcome name="Sara" />;
关于提取组件：
何时需要将组件拆分为更下的组件？
如果 UI 中有一部分被多次使用（Button，Panel，Avatar），或者组件本身就足够复杂（App，FeedStory，Comment），那么它就是一个可复用组件的候选项。
Props 的只读性：
首先了解下纯函数的定义：即不会更改入参的函数。
React 组件都必须像纯函数一样保护它们的 props 不被更改
State & 生命周期
State与生命周期的使用需要在class组件中。
State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。
使用this.setState() 来更新组件 state， 这时React会重新调用render()
生命周期：
componentDidMount() 在组件已经被渲染到 DOM 中后运行
componentWillUnmount() 组件被删除前
注意的几个点：
构造函数是唯一可以给 this.state 赋值的地方
State 的更新可能是异步的
出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。
因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。
事件处理
React 中你不能通过返回 false 的方式阻止默认行为，必须显式的使用 preventDefault。
e 是一个合成事件。React 根据 W3C 规范来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题
表单
React 中，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，表单元素通常会保持一些内部的 state。
受控组件(类似vue中使用:value或v-model绑定数据)：
- React 的 state 成为“唯一数据源”。
- 渲染表单的 React 组件控制着用户输入过程中表单发生的操作。
文件input标签 <input type="file" />是非受控组件，因为它的value只读。
状态提升
多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”。
即通过自上而下的数据流，将state放入父组件通过props传入子组件。
状态提升 vs 双向绑定
提升 state 方式比双向绑定方式需要编写更多的“样板”代码，但带来的好处是，排查和隔离 bug 所需的工作量将会变少。由于“存在”于组件中的任何 state，仅有组件自己能够修改它，因此 bug 的排查范围被大大缩减了。
组合 vs 继承
父组件中的所有内容内容都会作为名为children的prop传递给子组件
React vs Vue
Vue: 使用slot。
React: 没有slot槽的概念，因为React 元素本质就是对象，所以一切都可通过props传入子组件。
React 哲学
React 最棒的部分之一是引导我们思考如何构建一个应用。
第一步：划分组件层级
根据单一功能原则划分组价你的范围，一个组件原则上只负责一个功能。
第二步：创建一个静态版本
核心思想是渲染UI和添加交互这两个过程应该分开。因为编写应用的静态版本时往往需要编写大量代码，而不需要考虑太多交互细节；添加交互功能时则要考虑大量细节，不需要写大量代码。所以这两个过程分开更为合适。
构建应用的静态版本时，使用props传数据（即使需要使用state，这一步也不应该使用state，而是把state替换props留到添加交互这一步骤中实现）
构建顺序：
你可以自上而下或者自下而上构建应用。
当你的应用比较简单时，使用自上而下的方式更方便；对于较为大型的项目来说，自下而上地构建，并同时为低层组件编写测试是更加简单的方式。
第三步：确定UI state 的最小（且完整）表示
即找到应用所需的最少数量state的表示方式，其余数据均可由它们计算产生。遵循DRY(Don't Repeat Yourself)原则。
通过问自己以下三个问题，你可以逐个检查相应数据是否属于 state：
- 该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。
- 该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。
- 你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。
第四步：确定 state 放置的位置
你可以尝试通过以下步骤来判断
对于应用中的每一个 state：
- 找到根据这个 state 进行渲染的所有组件。
- 找到他们的共同所有者（common owner）组件（在组件层级上高于所有需要该 state 的组件）。
- 该共同所有者组件或者比它层级更高的组件应该拥有该 state。
- 如果你找不到一个合适的位置来存放该 state，就可以直接创建一个新的组件来存放该 state，并将这一新组件置于高于共同所有者组件层级的位置。
第五步：添加反向数据流
React 通过一种比传统的双向绑定略微繁琐的方法来实现反向数据传递。尽管如此，但这种需要显式声明的方法更有助于人们理解程序的运作方式。
网友评论