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)
                ])
            },