PureComponent

React-Pure-Component.md

React PureComponent

React.PureComponent

https://facebook.github.io/react/docs/react-api.html

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md#rule-details

React Top-Level API

https://gist.github.com/xgqfrms-GitHub/b95f1824f2ea5a2e28b09dff6fd191bc#gistcomment-2135012

https://60devs.com/pure-component-in-react.html

https://hackernoon.com/react-purecomponent-considered-harmful-8155b5c1d4bc

    
//todo

React.PureComponent & PureComponent

PureComponent

https://60devs.com/pure-component-in-react.html

https://hackernoon.com/react-purecomponent-considered-harmful-8155b5c1d4bc

react-api

https://facebook.github.io/react/docs/react-api.html

React Contribute

facebook/react#10062

https://facebook.github.io/react/contributing/how-to-contribute.html

https://code.facebook.com/pages/876921332402685/open-source-code-of-conduct

http://todogroup.org/opencodeofconduct/

---

ANT bug & solution

https://gist.github.com/xgqfrms-GitHub/4cf5cc3a67a9ed094cf008f13457bfac

// class props & this.props.onClickFunction

class PropsTest extends React.Component{
    render() {
        return (
            <div>
                <button onClick={props.onClickFunction} >
                    Add counter
                </button>
                <p>
                    this state is 
                    <span 
                        style={{color: "#0ff", fontSize: "32px"}}
                        >
                        {this.props.counter}
                    </span>
                </p>
            </div>
        );
    };
};

// function props & no need this

const Test = (props) =>{
    return (
        <div>
            <button onClick={props.onClickFunction} >
                Add `props` counter
            </button>
            <p
                style={{color: "#0ff", fontSize: "32px"}}
                >
                {props.counter}
            </p>
        </div>
    );
};



class App extends React.Component{
    state = {
        counter: 1
    };
    addCounter = (e) => {
        console.log(`e =`, e);
        this.setState(
          (prevState) => (
              {
                  counter: prevState.counter + 1
              }
          )
        );
    };
    render(){
        return(
            <div>
                <PropsTest 
                    onClickFunction={this.addCounter}
                    counter={this.state.counter}
                    />
                <Test 
                    onClickFunction={this.addCounter}
                    counter={this.state.counter}
                    />
            </div>
        );
    }
}


export default App;

const props = {
    name: "xgqfrms",
    age: 17
};

ReactDOM.render(
    <div>
        <App {...props}/>
    </div>
    , mountNode
);