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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_18661257/article/details/65440433

ReactReact库的对外接口,如果你使用script引入React,你就可以全局使用它,如果你是使用ES6npm,你则需要用import React from 'react',如果是使用ES5npm,则写成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.ComponentReact组件的基础类。

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

React.PureComponent

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

当然之前博客也说了,React.PureComponentshouldComponentUpdate()只是实现浅比较,当你使用复杂的数据结构,这个类就会起负面影响。
所以当你使用简单的propsstate时,可以只是继承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,
  [props],
  [...children]
)

复制一个React元素并返回一个新的,这其中的复制是浅复制,其中值得注意的是,如果是一个组件,它的内部元素会new出一个新的,但是prop,keyref会保留下来,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函数里面返回出来的值,如果childrennull或者undefined就返回nullundefined;

[在每一个直接子级(包含在 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的组件巴巴

没有更多推荐了,返回首页