第二十五期:react中的10个基本概念

304 阅读4分钟

这里记录工作中遇到的技术点,以及自己对生活的一些思考,周三或周五发布。

封面图

新一轮的疫情似乎开始了,各地严查防控,我们也需要注意自身防护

JSX

我们可以理解JSX是JS语法和XML语法的一种结合体。比如:

const element = <h1>Hello, world!</h1>;

React认为界面的渲染逻辑其实是和其他Ui逻辑存在内在的耦合。比如:需要绑定事件处理程序,通知UI状态变化,以及需要展示准备好的数据。

所以它并没有像之前的开发流程一样,将js和html放在不同的文件中。而是将html和Js逻辑共同写在组件中。

元素

元素是构成 React 应用的最小砖块。

以往我们在写html的界面的时候,一般用dom标签表示一个元素,比如一个div元素。

但是在React中,元素的概念稍有不同,React中的元素指的是创建的一个小的对象。这个对象元素会由React-Dom中的API更新成Dom节点,并且这个Dom节点和那个react对象元素保持一致。

比如将一个React元素渲染为一个Dom节点:

const root = <div>root</div>

ReactDOM.render(root,document.getElementById('root'))

元素的更新

React元素是一个不可变对象。一旦被创建,就无法更改它的子元素或者属性。

更新UI的唯一方式就是创建一个全新的元素,并使用ReactDom.render()进行渲染。

但是:React只更新它需要更新的部分

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

React DOM 会将元素和它的子元素与它们之前的状态进行比较,并只会进行必要的更新来使 DOM 达到预期的状态。

上面的代码中,尽管每一秒都会新建(调用render方法重新渲染)一个描述整个 UI 树的元素,React DOM 只会更新实际改变了的内容(时间信息)

组件

组件其实是代码中拆分出来的可复用的代码片段

在React中的表现形式主要是函数组件class组件

函数组件写法:

import React from 'react';
export default const Filter = (props) => {
  return (
    <div>filter</div>
  )
}

class组件写法:

import React from 'react';
class Filter extends Component {
  render() {
    return <div>Filter</div>
  }
}

state

如果你理解react的元素其实是一个对象。那么state其实是这个对象里的一个属性

因为它的确是react基础组件的构造器中的一个属性:

var ReactCompositeComponentMixin = {

  /**
   * Base constructor for all composite component.
   *
   * @param {?object} initialProps
   * @param {*} children
   * @final
   * @internal
   */
  construct: function(initialProps, children) {
    ReactComponent.Mixin.construct.call(this, initialProps, children);
    this.state = null;
    this._pendingState = null;
    this._compositeLifeCycleState = null;
  },

看到了么?

this.state = null

生命周期

生命周期是react为组件挂载,组件更新,组件接收参数,以及组件卸载时定义的一些方法。

具体的方法有:

  • componentWillMount
  • componentDidMount
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • updateComponent
  • componentDidUpdate
  • componentWillUnmount

react在写这段逻辑的时候采用了策略模式

先将方法策略写在ReactCompositeComponentInterface这个接口对象中,然后根据name属性的不同,执行不同的策略。

 var specPolicy = ReactCompositeComponentInterface[name];

事件处理

文档上只是说不需要使用 addEventListener 为已创建的 DOM 元素添加监听器。并且介绍了传递参数的方式。

我们可以这样理解:它其实是对原生的addEventListener进行了进一步的包装。因为它定义的EventListener如下:

var EventListener = {
  /**
   * Listens to bubbled events on a DOM node.
   *
   * @param {Element} el DOM element to register listener on.
   * @param {string} handlerBaseName 'click'/'mouseover'
   * @param {Function!} cb Callback function
   */
  listen: function(el, handlerBaseName, cb) {
    if (el.addEventListener) {
      el.addEventListener(handlerBaseName, cb, false);
    } else if (el.attachEvent) {
      el.attachEvent('on' + handlerBaseName, cb);
    }
  },

  /**
   * Listens to captured events on a DOM node.
   *
   * @see `EventListener.listen` for params.
   * @throws Exception if addEventListener is not supported.
   */
  capture: function(el, handlerBaseName, cb) {
    if (!el.addEventListener) {
      console.error(
        'You are attempting to use addEventlistener ' +
        'in a browser that does not support it support it.' +
        'This likely means that you will not receive events that ' +
        'your application relies on (such as scroll).');
      return;
    } else {
      el.addEventListener(handlerBaseName, cb, true);
    }
  }
};

当然这只是一小部分,复杂的逻辑需要我们深入的去研究。

条件渲染

在Vue中条件渲染存在v-ifv-show的区别。通常来说v-if是真正的条件渲染,v-show只是控制display属性的展示与否。

但是在react中,元素的更新时创建一个新的元素对象,所以这里的条件渲染就和v-if类似了。

受控组件

受控组件一般是指具有内部状态state的组件。通常多见与表单。state对象中的属性值,只能通过setState进行更新。

其实就是组件的内部状态控制。

props 和 state 的区别

从表象来看,props和state都是一个对象。

不同的是props是传递给组件的,而state是组件内部的属性。

从本质上来讲:props是构造函数的参数。state是构造函数的属性

这样说也不准确,准确的说法应该是:

props和state都是构造函数的属性,不同的是props的值是从构造函数的参数中获取的,而state的值是直接声明的。

最后

公众号【javascript高级程序设计】欢迎关注

回复《第四版》获取 javascript高级程序设计第四版 下载地址