useCallback #

import React, { useState, useCallback, memo } from "react";
class Child1 extends React.PureComponent {
    render() {
        console.log('child1 render');
        return <div>
            <button onClick={this.props.handler}>处理1</button>
        </div>;
    }
}
/* class Child2 extends React.PureComponent {
    render() {
        console.log('child2 render');
        return <div>
            <button onClick={this.props.handler}>处理2</button>
        </div>;
    }
} */
// 如果子组件是函数组件，则需要useCallback和memo配合使用「函数组件的属性浅比较是在memo中处理的，类组件是在shouldComponentUpdate中」
const Child2 = memo(function Child2({ handler }) {
    console.log('child2 render');
    return <div>
        <button onClick={handler}>处理2</button>
    </div>;
});
export default function Demo() {
    let [val, setVal] = useState('');
    const handler1 = () => {
        setVal('哈哈哈');
    };
    const handler2 = useCallback(() => {
        setVal('呵呵呵');
    }, []);
    return <div>
        <input type="text" value={val}
            onChange={ev => {
                setVal(ev.target.value);
            }} />
        <Child1 handler={handler1} />
        <Child2 handler={handler2} />
    </div>;
};