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

一、本堂课重点内容

• react的历史与应用
• react的设计思路
• react（hooks）的写法
• react的实现
• react的状态管理库
• 应用级框架

二、详细知识点介绍

1、react的历史与应用

应用

前端应用开发、移动端原生应用、结合Electron进行桌面应用开发

历史

• 2010年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的React的设计。
• 2011年 Jordan Walke 创造了FaxJS，也就是后来的React原型:
• 2012年 在Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用, Jordan Walke 基于 FaxJS 的经验开发出了React
• 2014年-今天 生态大爆发，各种围绕React的新工具/新框架开始涌现

2、react的设计思路

响应式编程

组件化

• 组件声明了状态和UI的映射
• 组件有Props/State两种状态，前者是父组件传入的数据，后者是组件内部维护的数据
• 组件可由其他组件拼装而成

3、react（hooks）的写法

4、react的实现

diff

• 不同类型的元素替换
• 同类型的DOM元素更新
• 同类型的组件元素递归

5、react的状态管理库

6、应用级框架

三、实践练习例子

function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

四、课后个人总结

了解了react，了解到了react的历史，以及虚拟dom等。

五、引用参考

bytedance.feishu.cn/file/boxcnG…