React学习之高级顶配API说明二十二

React是React库的对外接口，如果你使用script引入React，你就可以全局使用它，如果你是使用ES6的npm，你则需要用import React from 'react'，如果是使用ES5的npm，则写成var React = require('react')

组件相关

React重用代码的方式就是组件，大部分UI要想在React中重用，一般都会写成组件的形式，只要将类继承React.Component或者React.PureComponent都可以。

如果环境中无法使用，则使用createClass()就可以创建一个组件类。

创建React元素

我们可以写JSX语句来创建React元素，JSX只是React.createElement()的语法糖而已，你使用JSX，其实只是间接的使用如下函数：

createElement() createFactory()

其他元素处理API

cloneElement() isValidElement() React.Children

PropTypes检测类型

React.PropTypes
React.PropTypes.array
React.PropTypes.bool
React.PropTypes.func
React.PropTypes.number
React.PropTypes.object
React.PropTypes.string
React.PropTypes.symbol
React.PropTypes.node
React.PropTypes.element
React.PropTypes.instanceOf()
React.PropTypes.oneOf()
React.PropTypes.oneOfType()
React.PropTypes.arrayOf()
React.PropTypes.objectOf()
React.PropTypes.shape()
React.PropTypes.any

还可以通过isrequired来控制一定要有该属性

Add-Ons

如果使用了react-width-addons.js那么Add-Ons会提供一个React.addons用来处理上述相关事件

函数狂欢开始,之前提到的函数会稍微讲一下用处，算是一个总结

React.Component

React.Component具体是什么鬼，后续博客会讲到，这里会稍微提一下。

React.Component是React组件的基础类。

class Greeting extends React.Component {
  render() {
    return <h1>Hello,{this.props.name}</h1>;
  }
}

React.PureComponent

React.PureComponen很像React.Component但是实现了shouldComponentUpdate()来优化性能

当然之前博客也说了，React.PureComponent的shouldComponentUpdate()只是实现浅比较，当你使用复杂的数据结构，这个类就会起负面影响。
所以当你使用简单的props和state时，可以只是继承PureComponent，而对于复杂的数据结构而言需要用forceUpdate(这个函数会强行调用render进行视图更新)来处理，又或者直接不允许有数据变化(当然这就非常尴尬了)

forceUpdate更新实例

class Tmq extends React.PureComponent{
    constructor(props){
        super(props);
        this.Exhandler = this.Exhandler.bind(this);
    }
    Exhandler(){
        //this.forceUpdate();
    }
    render(){
        console.log("render");
        return <div onClick={this.Exhandler}>abcd</div>;
    }
}

ReactDOM.render(
    <Tmq/>,document.getElementById("root")
    );

createClass()

var Greeting = React.createClass({
  render: function() {
    return <h1>Hello,{this.props.name}</h1>;
  }
});

前面非ES6已说过

createElement()

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

第一个参数为DOM元素标签，或者是一个组件类名，或者是函数式组件名
以前还有React.DOM.a(...)，即React.createElement('a',...)，只是它现在已经快要被抛弃了，所以，你懂的，不要用。

cloneElement()

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

复制一个React元素并返回一个新的，这其中的复制是浅复制，其中值得注意的是，如果是一个组件，它的内部元素会new出一个新的，但是prop,key和ref会保留下来，props可以通过第二个参数进行更新。

React.cloneElement()效果如同下面的代码：

<element.type {...element.props} {...props}>{children}</element.type>

这个函数与React.addons.cloneWidthProps()存在不同

createFactory()

React.createFactory(type)

这个函数返回一个产生type的函数，如同返回类似于React.createElement()的函数，type这个参数可以是DOM标签字符串也可以是一个React组件

这个函数也是会被抛弃的，所以建议使用JSX或者是React.createElement来产生。

这个函数在前面的非JSX中也没怎么提到过。

isValidElement()

React.isValidElement(object)

检测对象是不是一个React元素，是返回true，不是返回false

React.Children

提供了一系列操作this.props.children的方法

React.Children.map

React.Children.map(children,function[(thisArg)])

第一个参数为某个this.props.children，第二个参数是一个函数，如果children只有一个根包容标签那么函数就只会作用在那个标签上，如果是并列的标签则会一一作用。返回返回一个数组，这个数组里面的值是你在fn函数里面返回出来的值，如果children是null或者undefined就返回null或undefined;

[在每一个直接子级（包含在 children 参数中的）上调用 fn 函数，此函数中的 this 指向上下文。如果 children 是一个内嵌的对象或者数组，它将被遍历,每个键值对都会添加到新的 Map。如果 children 参数是 null 或者 undefined，那么返回 null 或者 undefined而不是一个空对象。]

React.Children.forEach

React.Children.forEach(children,function[(thisArg)])

和map一样，只是不会返回数组

React.Children.count

React.Children.count(children)

返回组件子元素的总数量，其数目等于React.Children.map()和React.Children.forEach()的执行次数。

React.Children.only

React.Children.only(children)

返回唯一的子元素否则报错

React.Children.toArray

React.Children.toArray(children)

返回一个由各子元素组成的数组，如果你想在render事件中操作子元素的集合时，这个方法特别有用，尤其是在重新排序或分割子元素时。

博客可能存在片面性或者错误，所以所有博客有错误的希望大家指出来

下一篇将讲React的组件巴巴

React学习之高级顶配API说明二十二

相关推荐