2 minutes read (About 233 words)

virtualDOM

React中常见名词解释：

  • Reconciliation 通过ReactDOM等类库与 “真实DOM” 同步

virtualDOM是一种编程概念，UI以一种理想化的，虚拟的表现形式存在与内存中，通过virtualDOM这种方式，产生了声明式API的编程风格，相较于jquery，这种声明式的API帮助我们从以往的属性操作、事件处理和手动更新DOM这些必要的操作中解放出来。

所以可以从以下几个点入手看看ReactDOM都做了哪些事情

1、事件处理

提到virtualDOM，就不得不说以下React16中新加入的Fiber协调引擎，以及React fiber这种新的数据结构，他们的主要目的是使VirtualDOM可以进行增量式渲染。想了解更多的可以看这篇 https://github.com/acdlite/react-fiber-architecture

源码分析：

ReactDOM.render( childNode, domContainer )

a minute read (About 170 words)

react16特性

React16是一个重大更新，将React管理Reconciliation的算法全部重构了( group-up rewrite for how React manages reconciliation)。在兼容之前版本的主要API的情况下，还增加了以下新特性:

  • 具备将代码块中可中断的任务分割的能力
  • 能够将进程中的任务划分优先级( prioritize )执行
  • 异步渲染，利用React Fiber，这种新的数据结构（fiber reconciliation），原来是一种堆栈结构(stack reconciliation)
  • 完善了错误处理机制，不会因为一个子组件的崩溃导致整个应用崩溃。componentDidCatch

Reconciliation: 通过ReactDOM等类库 与 真实DOM 同步

2 minutes read (About 307 words)

some_thing_about_react

一、React Components & React Elements & Instance

components: 输入props,输出element Tree. 单一数据流。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 1、作为functions定义
const Button = ({children, color}) => ({
    type: 'button',
    props: {
        className: 'button button-'+color,
        children: {
            type: 'b',
            props: {
                children: children
            }
        }
    }
})

// 2、使用React.createClass()
const Button = React.createClass({
    render(){
        const { children, color } = this.props
        return {
            type: 'button',
            props: {
                className: 'button button-' + color,
                children: {
                    type: 'b',
                    props: {
                        children:children
                    }
                }
            }
        }
    }
})

//3、使用ES6的class继承自React.Component
class Button extends React.Component{
    render(){
        const { children, color } = this.props
        return {
            type: 'button',
            props: {
                className: 'button button-' + color
                children: {
               		type: 'b',
                    props: {
                		children: children
                    }
                }
            }
        }
    }
}
elements: 一个不可变的描述对象，告诉react要绘制什么样的视图。element本质上只是普通对象，描述了component instance 和 DOM Node，包括这俩者想要得到的属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
    type: (string | ReactClass),
    props: Object，
    $$typeof: Symbol.for('react.element')
}

i.e.
{
    type: 'button',
    props: {
       className: 'button button-blue',
       children: {
         type: 'b',
         props: {
             children: 'ok'
         }
       }     
    }
}
得到以下结果:
<button className='button button-blue'>
    <b>
    	ok
    </b>
</button>

// 1、通过React.createElement创建React element
React.createElement(
  type, 
  [props],
  [...children]
)

// 2、JSX
const name = 'joeng'
const Ele = <div>hello,{name}</div>


// 校验是否是React Element 
React.isValidElement(object)
instances: 只有用class声明的React Components才有instance，instance是React创建和管理的，比起components和elements来说，instance显得不是那么重要。
Follow

Tag Cloud

Babel CSS ES6 ES7 Functional Programming Html JavaScript Node.js Promise React RxJS Tool TypeScript browser css http node.js react redux webpack 互联网广告 前端工程化 缓存

Categories

Recent

Archives

Tags

Categories

Recent

Archives

Tags

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×