React frequently asked questions(持续更新2018-05-15)

15 May 2018

1.ajax

                import $ from 'jquery';

                const FAQ_GLOBAL = {};
                FAQ_GLOBAL.fetch = (url, type = 'get', data = {} ) => {
                    return new Promise( (resolve, reject) => {
                        $.ajax({
                            url: url,
                            type: type,
                            dataType: 'json',
                            data: data,
                            cache: false
                        })
                        .done(function(resdata) {
                            resolve(resdata);
                        })
                        .fail(function(error) {
                            reject(error);
                        });
                    });
                };

                export { FAQ_GLOBAL as default };
            

                import React from 'react';
                import ReactDOM from 'react-dom';
                import FAQ_GLOBAL from './faq-global';

                class FAQ extends React.Component {
                    constructor(props) {
                        super(props);
                    }

                    componentDidMount() {
                        //1.AJAX and APIs
                        FAQ_GLOBAL.fetch('./test.json', 'get', {'author': 'sheldon'}).then( (data) => {
                            console.log(data);
                        }, (error)=>{
                            console.log(error);
                        });
                    }

                    render(){
                        return(
                            <React.Fragment>
                                ... ...
                            </React.Fragment>
                        )
                    }
                }

                ReactDOM.render(
                    <FAQ />,
                    document.getElementById('r2018')
                );
            
            

2.How do I pass a parameter to an event handler or callback?

                <div onClick={this.clickhandler.bind(this,7)} data-id={8} >click me!</div>
                ...
                ...
                clickhandler(data, e){
                    //2.How do I pass a parameter to an event handler or callback?
                    //通过bind data和 data-id两种方式可以向event中传值
                    console.log('data：'+ data);
                    console.log('e.id:'+ e.target.dataset.id);
                }
            
            

3.How can I prevent a function from being called too quickly or too many times in a row?

导入import throttle from 'lodash.throttle';和 import debounce from 'lodash.debounce';

                import React from 'react';
                import ReactDOM from 'react-dom';
                import throttle from 'lodash.throttle';
                import debounce from 'lodash.debounce';

                class FAQ extends React.Component {
                    constructor(props) {
                        super(props);
                        this.clickhandler = this.clickhandler.bind(this);
                        //3.throttling
                        this.handleClick = this.handleClick.bind(this);
                        //每5秒触发一次
                        this.handleClickThrottled = throttle(this.handleClick, 5000);
                        //3.debouncing
                        this.handleChange = this.handleChange.bind(this);
                        //延迟1秒再触发
                        this.emitChangeDebounced = debounce(this.handleChange, 1000);
                    }

                    handleClick(){
                        console.log('throttling');
                    }

                    handleChange(e){
                        console.log('debouncing');
                    }

                    componentWillUnmount() {
                        this.handleClickThrottled.cancel();
                        this.emitChangeDebounced.cancel();
                    }

                    render(){
                        return(
                            <React.Fragment>
                                <p onClick={this.handleClickThrottled} >3-1)throttling: sample changes based on a time based frequency</p>
                                <p onClick={this.emitChangeDebounced} >3-2)debouncing: publish changes after a period of inactivity</p>
                            </React.Fragment>
                        )
                    }
                }

                ReactDOM.render(
                    <FAQ />,
                    document.getElementById('r2018')
                );
            
            

4.Can I do animations in React?

                // React Transition Group
                // https://reactcommunity.org/react-transition-group/
                // react-motion
                // https://github.com/chenglou/react-motion