原创

React 新手笔记

之前用的是 vue,7月开始接触 react,匆匆忙忙开始写代码,不少东西都不太了解,一边写一边看文档/文章。随手记录一些东西。

团队的技术栈是 React saga + tcff(内部开源的框架,类似 dva)+ tea(内部开源的 UI 框架)

组件定义的两种方式
jsx 编译过程 | 组件生命周期 | 特殊的钩子函数

没有什么逻辑的文字笔记

  • 出于性能考虑,React 会将多个 setState 合并,一次性更新
  • 要根据上一个状态计算下一个状态时,用 setState(prevState, prevProps)
  • 类组件里只有 constructor 和生命周期函数默认将 this 绑在了当前组件上,自定义的方法不然就是在 constructor 里用 bind 绑定 this,不然就是用 arrow function
// 方法一,用 bind
constructor(props) {
    ...
    this.handleClick = this.handleClick.bind(this);
}

// 方法二,用 arrow function
handleClick = () => {
    ...
}
  • 如果组件返回 null,那页面上不会显示出组件,但是组件的生命周期还是会被调用到
return null; // 函数组件直接返回

render() { // 类组件调用 render 渲染
    return null;
}
  • <select>、<input>、<textarea> 需要绑定 onChange 更新当前 value
  • 大表单更新 state 的时候,应该写一个通用的方法,根据表单项(name="password"、name="date")更新对应字段
  • 状态提升:父组件管理 state,通过 props 更新子组件

参考资料

  1. React精髓!一篇全概括(急速)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react-id-swiper 的使用

    github 地址,demo地址。支持多种场景,作者对 issues 的响应极快。

    kmokidd
  • 调整 z-index,优化动画性能

    基本大家已经了解优化动画性能的套路了: 开启硬件加速的同时,又要小心硬件加速后页面层级的坑,导致 CPU 和内存大量消耗,硬件加速没有起到正向的作用,反而对页面...

    kmokidd
  • [pixlate] 用 canvas 转像素画

    几周前看到这个像素猫的效果,这个版本的实现原理是 box-shadow,我想到用 grid 也可以实现一遍。接着发散到了“如何将任意图片像素化”上。

    kmokidd
  • vue之组件边界情况处理

    在绝大多数情况下,我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。不过也确实在一些情况下做这些事情是合适的。

    开发架构二三事
  • 【腾讯轻舟Raft】后台组件的治理思路

    | 导语 腾讯轻舟平台(RAFT,Rapid Application Framework of Tencent)是一个致力于组件治理,为创新型应用提供“端云一...

    腾讯大讲堂
  • 说一句最好的Flutter开源项目也不过分

    老孟导读:首先声明此项目不是我完成的,是大神`张风捷特烈`呕心沥血之作,对初学者有极大对帮助,当然我获得了大神`张风捷特烈`的授权,所以我不是盗版哦。

    老孟Flutter
  • 【微服务】139:Vue之组件化开发

    和Java中一样,js中也是使用new Date()创建日期对象,可以将毫秒值转换成日期。

    刘小爱
  • 前端组件设计原则

    我在最近的工作中开始使用 Vue 进行开发,但是我在上一家公司积累了三年以上 React 开发经验。虽然在两种不同的前端框架之间进行切换确实需要学习很多,但是二...

    ConardLi
  • 漫谈 React 组件库开发(二):组件库最佳实践

    一个系统拥有大量的业务场景和业务代码,相似的页面和代码层出不穷,如何管理和抽象这些相似的代码和模块,这肯定是诸多团队都会遇到的问题。不断的拷代码?还是抽象成 U...

    有赞coder
  • 干货 | 从0到1,搭建一个体系完善的前端React组件库

    随着前端工程的发展,组件化的思想早已深入人心;现代的前端框架React/Vue等,都是围绕组件设计;组件化的开发模式,大大提高了开发效率;设计和开发高质量高复用...

    携程技术

扫码关注云+社区

领取腾讯云代金券