常用的React API总结

24 Nov 2015

1.React.Component

用ES6定义的react组件都继承自这个基础类，该方法提供了react组件需要的基础API

                //ES6标着下，定义react组件Hello，他继承了React.Component
                export default class Hello extends React.Component {
                    constructor(props) {
                        super(props);
                    }
                    render() {
                        return(
                            <div>Hello!</div>
                        );
                    }
                };
            

2.React.createClass

ES5下定义react组件的基本写法，创建组件用React.createClass

                var Hello = React.createClass({
                    render:function(){
                        return(
                            <div>Hello!</div>
                        );
                    }
                });
            

3.React.render

渲染react的虚拟dom到页面需要的方法，render()是有回调函数的，在内容渲染到页面之后调用

                var title="I come from props";
                React.render(
                    <Hello title={title}/>,
                    document.getElementById("test1")
                );
            

4.React.unmountComponentAtNode()

返回值和参数boolean unmountComponentAtNode(DOMElement container)，unmountComponentAtNode可以删除渲染的dom结构（react组件），包括组件上绑定的事件以及其中的state，但是要注意的是，在组件内部不能删除组件中的部分，但是可以删除组件全部，记住要找DOMElement container。如果有组件返回true，如果没有组件返回false。

                //这个是在组件Rs4外部，先渲染后删除的例子
                React.render(<Rs4/>, $(addr).get(0), function(){
                    alert("111");
                    React.unmountComponentAtNode($(addr).get(0));
                } );
            

5.ReactDOM.findDOMNode

这个函数用于获取真实dom结构中的值，主要场景是form field values还有真实dom中的一些属性,记住这个函数only works on mounted components。最好是和refs组合用

                //返回值和参数DOMElement findDOMNode(ReactComponent component)
                componentDidMount(){
                   var test = React.findDOMNode(this.refs.testRef);
                   console.log(test.innerHTML);
                   console.log($(test).height());
                }
            

6.React.PropTypes

用于props的输入验证,在ES6中我测试还用不了，虽然有指定写法

                ES5中写在React.createClass中
                propTypes:{
                    title: React.PropTypes.string.isRequired,
                }
                ES6写在class外
                Counter.propTypes = { 
                    initialCount: React.PropTypes.number 
                };
            

7.this.props.children

表示的是组件内嵌的文本或节点

8.this.setState

setState过后会调用render但是并不会马上调用render，(不保证同步)当然你，如果在shouldComponentUpdate()中添加判断逻辑，那么setState可能调不到render

                this.setState({
                    text: "second",
                });
            

9.this.forceUpdate()

强制调用执行render(),并且是skipping shouldComponentUpdate().

10.statics

如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

                var MyComponent = React.createClass({
                statics: {
                    customMethod: function(foo) {
                        return foo === 'bar';
                    }
                },
                render: function() { }
                });
                MyComponent.customMethod('bar');  // true
            

11.dangerouslySetInnerHTML

Provides the ability to insert raw HTML, mainly for cooperating with DOM string manipulation libraries

                function createMarkup() { return {__html: 'First · Second'}; };
                <div dangerouslySetInnerHTML={createMarkup()} />