这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

react 入门

前言

一个笔记先说明他的适用范围，这一篇文章的入门不是纯新手入门，甚至不是传统三件套的过渡，而是对别的组件式框架的过渡。换言之你应该会 vue 之类的，但是只是囫囵的学了语法，对于前端的机制没有认识，才会有点用。

然后我说明我会写些什么，首先是对 react 组件化思想的一个小小的阐释，然后介绍 hook 的写法，最后写一些和库有关的东西。

设计思路

来源

一般技术的更迭是在需求与当前技术的矛盾中诞生的，而 react 也不意外。

传统 UI 编程痛点

1. 状态更新 ui 不动（需要频繁操作 dom，刷新页面）
2. 代码没有组件化封装（可读性差，代码和页面没有明显关系）
3. ui 之间数据依赖复杂

随之的解决方案是组件化思想，这里说的组件是指状态和组件写在一起，这个就不用 dom 去联系组件了。

组件化

1. 组件是组件/原子的组合
2. 组件有状态但是在外部不可见
3. 父组件可将状态传入组件

按照这个思路我们开始思考状态和组件的归属关系。

状态归属问题

若一个节点有两个节点共享，这个状态需要在两个节点最近的祖先节点

原因比较简单，组件化 2、3 可知节点只能由其父节点传入。

react 的设计

1. 组件声明状态和 UI 对应
2. 组件有 props 和 state 的两种状态（props 是由父节点传入的用以修改 state）
3. 组件有其他组件拼装

所以我们认为组件应该如下

function Component(props) {
  const url = props;
  this.text = "aaa";
  return;
  `
  <div> {props}+{text}</div>
`;
}

这个规范也是react的组件的规范，这样确实将ui和状态写在一起。