React.js 小书 (第一阶段)


  • React高级班

    瞎扯谈

    上完第二次课后就没什么时间学习了,上次直播课都没空去看,今天趁有时间,看了一下react小书

    React 小书前言

    看了react.js小书的介绍,做了将近4个月react 项目,恍然一下原来react.js就是只提供 UI (view)层面的解决方案。有了这翻理解之后,小书文内的介绍还是比较好吸收的。

    第一个模块:前端模块化(1-3)

    从一个简单的点赞例子说起,一个简单的点赞功能,自然而然就会包含两种行为:点赞和取消点赞。
    在这个例子前面中,有个地方不是很明白this.el 指向的是哪里? 因为这个东西之前只在vue项目遇到过,并没有在react使用。@worldsong

    主要通过两个大阶段的演练,灌输了react组件化的思想。

    结构复用 -> 实现简单的组件化
    状态改变 -> 构建新的 DOM 元素更新页面 -> 重新插入新的 DOM 元素

    抽象出公共组件类

    总结才是重点:文中说道“组件化可以帮助我们解决前端结构的复用性问题,整个页面可以由这样的不同的组件组合、嵌套构成。”

    未完···
    (ps:为什么不能保存为草稿☹


  • React高级班

    JSX

    1、JSX 是 JavaScript 语言的一种语法扩展,长得像 HTML,但并不是 HTML。
    2、react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素,并且渲染到页面上。
    3、JSX 到页面的过程:JSX -> babel编译 -> 通过react.js构造后 -> 组成JavaScript对象的结构 -> 再通过 ReactDOM.render 创建DOM元素 -> 渲染插入页面

    render 方法

    1、render内return中必须是JSX语法
    2、必须使用一个最外层的元素对起内部的内容进行包裹起来,若出现最外层有多个元素,则编译会报错。
    3、在reader里 元素如有多种结果,推荐使用三木运算符条件渲染输出。如 {isGoodWord ? <strong> is good</strong> : <span> is not good</span> }

    react 事件监听

    1、其实react监听很简单,基本和JavaScript相差不到哪里去,只需要用reactjs提供的 on*的方法就可以了 如 JavaScript中的onclick=" " -> react中的 onClick={}

    注意 :没有经过特殊处理的话,这些 on*的事件监听只能用在普通的 HTML 的标签上,而不能用在组件标签上。

    2、react已经将浏览器原生的event对象进行了封装,我们只需要调用 event 对象就行了,其他兼容问题统统不需要管。
    3、事件需要手动绑定 this

    setState 赋值异步处理问题

    使用prevState 对state叠加同步处理

    props

    1、不可修改,除非外部对它进行改变,否则就是不可变状态
    2、可以通过给组件添加类属性 defaultProps 来配置默认参数。

    state VS props

    1、state的主要作用是用于组件保存、控制、修改自己的可变状态。
    2、props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。
    3、state可用可不用,使用state会让项目复杂度提升,增加维护成本。
    4、在不熟悉state的情况下,尽可能的使用props的无状态组件方式进行组件的创建

    列表渲染

    1、善用 map
    2、列表需要给每个元素添加 key,key 能高效的减少DOM的操作

    如果没加key,那么当两个元素位置交换的时候,reactjs会对这两个元素重新渲染(可避免),再执行 Virtual-DOM 策略,这就大大增加DOM的操作了,同时对性能负载也大。
    加上key之后,react会尽量复用元素内部的结构,从而不需要达到重新渲染的目的。


Log in to reply
 

Looks like your connection to 新前端社区 was lost, please wait while we try to reconnect.