React基础与实践 | 青训营笔记

user3590355151746
44 阅读2分钟

01 React 简介与特性

1.声明式: React 使创建交互式 UI 变得轻而易举。为应用的每一个状态设计简洁的视图，当数据变动时 React能高效更新并渲染合适的组件。
2.组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
3.跨平台编写: 无论使用什么技术栈在无需重写现有代码的前提下，通过引入React来开发新功能。

React的早期原型被称为“FaxJS”，它是由Facebook工程师Jordan Walke开发，因为他深受XHP的影响，XHP是一个简单的PHP HTML组件框架。React于2011年首次亮相，首次用于Facebook的Newsfeed。第二年在Instagram中使用。2013年5月，React在美国JSConf开源。

React项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的Web App解决方案。衍生的React Native项目，希望用写Web App的方式去写Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次UI ，就能同时运行在服务器、浏览器和手机。

React主要用于构建UI。可以在React里传递多种类型的参数，如声明代码，帮助开发者渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

  • 更新流程

    • image.png

    image.png

  • 优点
    • 快速响应: Fiber
    组件化:复用性强
    声明式编程
    跨平台:只需修改渲染器
  • 缺点
    • 大型应用需要配套学习 状态管理、路由工具
    不适合小型应用，需用 babel 处理

    02 React 基础温故知新

    用React开发web应用

    image.png

  • 用React开发web应用_组件

    • image.png

    image.png

    image.png

    image.png

    hook 规则和原理

    Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：
  • 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
  • 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。
    • 注意：hook只能使用在函数组件中，class组件不支持，所有hook默认约定名称用use开头

    过期闭包问题

    image.png

    React常见API及作用

    image.png

    React常见hook及作用

    image.png

    03 业务场景案例

    如何划分组件

    image.png

    组件间共享信息

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    04 课程总结与答疑

    image.png

    avatar
    文章
    阅读
    粉丝