React 的高級用法(Children、Component、createElement、cloneElement)

 

React.Children

    props.children 代表了所有的子節點。

    React.Children 用於處理 props.children 的

    提供了幾個方法 ( map ，foreach )

    遍歷所有的子節點，並且配合 React.cloneElement / React.createElement 使用

 

 

React.PureComponent / React.Component

    通過 ES6 繼承創建組件的兩種方式：一個是未深度檢查和深度檢查

    其他創建組件方法：

    React.createClass({})  移除

    無狀態組件

    React.createElement

 

 

 React.createElement

      實時創建一個直接創建一個組件

      

React.createElement(
  type,
  [props],
  [...children]
)

　　

 

 React.cloneElement 

      克隆要給組件，備用

React.cloneElement(
  element,
  [props],
  [...children]
)

　　

   vue 直接用方法創建dom

render(createElement) {
                return createElement('section', {
                    style: '',
                    attrs: {
                        style: 'width: 100%;height: 100%;overflow: hidden;position: relative',
                    },
                    ref: 'box'
                }, [
                    createElement('section', {
                        style: '',
                        attrs: {
                            style: '-webkit-transition: all 0s;transition: all 0s;-webkit-transform: translate(0,0);transform: translate(0,0);height: 100%',
                        },
                        ref: 'slideBox'
                    }, [
                        this.$slots.default,
                        this.$slots.default,
                        this.$slots.default,
                    ]),
                    (this.pagination ? createElement('div', {
                        attrs: {
                            class: 'jt-com-flex jt-com-center pagination',
                        },
                    }, (() => {
                        const pag = []
                        for (let i = 0; i < itemLength / 3; i++) {
                            pag.push(createElement('p', {
                                'class': {
                                    active: Math.abs(this.index % 3) === i,
                                },
                            }))
                        }
                        return pag
                    })()) : null)
                ])
            },