《深入React技术栈》-제1장

发表于 | 分类于
本文字数： 4.4k | 阅读时长 ≈ 8 分钟

《深入React技术栈》一直想看来着，上次去还书刚好发现有一本可以借。

在blog中记录一些看书的时候，书上提到了但是对概念很模糊的内容。

第1章就讲了基础的简介、JSX、组件、数据流、生命周期、ReactDOM。

那就开工啦！

MVC & MVVM

React是专注于提供清晰、简介的View层解决方案，但是也包括View和Controller的库。

MVC

参考链接

MVC 指 Model View Controller

  • View层是界面
  • Model层是业务逻辑
  • Controller层用来调度View层和Model层，将用户界面和业务逻辑合理的组织在一起，起粘合剂的效果。

通俗的说！我们需要数据所以有了M，我们需要界面所以有了V，而我们需要找一个地方把M赋值给V来显示，所以有了C

MVVM

参考链接

MVVM 指 Model View ViewModel

MVVM 可以说是 MVC 的升级版本

MV的作用体现在'数据解析'，与C的存在相独立，MVVM中的持有关系就是：C持有VM，VM持有M。

JSX 定义标签，只允许被一个标签包裹

错误信息

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?

错误原因

JSX的标签会被转义成对应的 React.createElement 调用方法，最外层没有被包裹那么就无法转译成方法调用。

JSX 中的元素类型及区别方式

标签首字母为小写则对应 DOM 元素，首字母为大写则为组件元素。

! & !!

!

取反。

!!

将 0 | -0 | null | '' | "" | false | undefined | NaN 转化为false，其他为true。

简单来说就是判断某个变量非空。

if (!!demo) {}

↑ 当 demo 非空时才会运行{}中的内容。

自定义 HTML 属性

参考MDN描述

以下是在 ReactJS 项目中使用的 demo

code
1
2
3
4
5
6
7
8
9
handleClick = e => {
  console.log(e.target.dataset.name)
}

render(){
  return(
    <button data-name='demo'>this is a message</button>
  )
}

点击 button 之后在 console 台会输出 'demo'

除此之外，还可以在 CSS 中使用。

code
1
2
3
button[data-name='demo'] {
  color: #fff;
}

JSX 中的转义问题

React 会将所有要显示到 DOM 的字符串转义，防止 XSS ←这里需要科学上网。

因此转以后的实体字符在最后的 DOM 中不会正确显示。

如： &copy;

解决方法:

  • 直接使用 UTF8 字符，如：©；
  • 使用对应字符的Unicode编码查询编码；
  • 使用数组组装 <div>{['cc ', <span>&copy;</span>, ' 2019']}</div>
  • 插入原始HTML。

以及dangerouslySetInnerHTML属性

2019-06-10更新

挂载和卸载

在《深入React技术栈》中，挂载被描述为"组件状态的初始化"。

引用这里的说法，React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。

挂/卸载阶段的生命周期函数

挂载过程的生命周期函数：

-> constructor()
-> componentWillMount()
-> render()
// 然后构造 DOM 元素插入页面
-> componentDidMount()

卸载过程的生命周期函数：

// 即将从页面中删除
-> componentWillUnmount()
// 从页面中删除

在组件删除之前 React.js 会调用组件定义的 componentWillUnmont()

生命周期函数使用规范

  1. 一般来说，所有关于组件自身的状态的初始化工作都会放在 constructor 里面去做。即 state 的初始化都在 constructor 中进行；
  2. 一些组件启动的动作，包括像 Ajax 数据的拉取操作、一些定时器的启动等，就可以放在 componentWillMount 里面进行；
  3. componentWillUnmount 的作用就是在组件销毁的时候，做一些清场的工作，例如清除该组件的定时器和其他的数据清理工作。
  4. 有些组件的启动工作是依赖 DOM 的，例如动画的启动，而 componentWillMount 的时候组件还没挂载完成，所以没法进行这些启动工作，这时候就可以把这些操作放在 componentDidMount 当中。

更新阶段的组件生命周期

挂载是从无到有的过程，而更新是组件的变化过程。
指的是父组件向下传递 props 或者组件自身执行 setState() 方法时发生的一系列更新动作。

-> shouldComponentUpdate(nextProps, nextState)：通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。
-> componentWillReceiveProps(nextProps)：组件从父组件接收到新的 props 之前调用。
-> componentWillUpdate()：组件开始重新渲染之前调用，这个生命周期中不能执行setState()
-> componentDidUpdate()：组件重新渲染并且把更改变更到真实的 DOM 以后调用。

2019-06-11更新

ReactDOM

一直对于 ReactDOM 的印象是：在应用的 index.js 文件中出现过。就如书上所说，在 React 组件的开发实现中，我们不会用到 ReactDOM ，只有在顶层组件以及由于 React 模型所限不得不操作 DOM 的时候，才会使用。

ReactDOM 的 API

  1. findDOMNode

    当组件被渲染到 DOM 之后， findDOMNode 返回该组件实例相应的 DOM 节点。
    可以用于获取表单的 value 以及用于 DOM 的测量。
    此方法只对已挂载的组件有效。

  2. render

    render 把 React 渲染的虚拟 DOM 渲染到浏览器的 DOM 中。

    code
    1
    2
    3
    4
    5
    ReactComponent render (
      ReactElement ele,
      DOMElement container,
      [function callback]
    )

    render 方法把元素挂载到 container 中，返回 ele 实例 （即 refs 引用）。若无状态组件则 render 返回 null 。装载完成时调用 callback 。

  3. unmountComponentAtNode

    此方法与 render 相反，用于卸载操作。

ref

-> 网络资料

refs 是 React 组件中非常特殊的 props ，组件被调用时会新建一个该组件的实例，而 refs 指向这个实例。

code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class AutoFocusInput extends Component {
  componentDidMount () {
    this.input.focus()
  }

  render () {
    return (
      <input ref={(input) => this.input = input} />
    )
  }
}

ReactDOM.render(
  <AutoFocusInput />,
  document.getElementById('root')
)

上面实现了进入页面就聚焦输入框。
原理是当 input 元素在页面挂载完成后，会调用 ref 值中的这个函数，把挂载好的 DOM 元素作为参数传入函数。
如果把 refs 放到 React 组件中，获取到的就是 React 组件的实例。（不建议）

refs 还可以帮助获取 DOM 元素的尺寸来做后续动画啦等等的 DOM 操作。

ref 的值还可以是字符串。

code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react'

class App extends React.Component {
  componentDidMount(){
    //myComp 是 Comp的一个实例，需要 findDOMNode 转为相应的 DOM
    const myComp = this.refs.myComp
    const dom = findDOMNode(myComp)
  }

  render(){
    return(
      <div>
        <Comp ref='myComp' />
      </div>
    )
  }
}

一个问题就是书中使用的是 "refs" 而网路上更多的是 "ref"，指的应该是同一个东西，为什么说法有差异没有找到具体的说法（感觉是因为这本书太老了。

另外对于 ref ，建议的是尽量少使用 。 ReactJS 已经提供了一系列 on* 监听事件，且 ReactJS 的特色就在于减少了 DOM 的操作。因此过多的 ref 使用会增加理解和维护难度。

总结

OK 那么第一章的就结束啦！

看了第一章的最大的感觉就是 这本书也太老了
因为书的出版时间是2016年，因此一些内容也参考了 React.js 小书

主要记录了一些书中提到/讲解的我比较模糊的概念（当然也有一些内容赘述了

那么！

祝大家新年快乐啦

0%