различное поведение обновления состояния между жизненным циклом componentDidUpdate () и useEffect () (без второго аргумента)? - PullRequest
Новая
       34

различное поведение обновления состояния между жизненным циклом componentDidUpdate () и useEffect () (без второго аргумента)?

0 голосов
/ 06 февраля 2020

У меня есть два примера фрагментов кода, которые можно запустить на https://jscomplete.com/playground. Когда я по ошибке изменил состояние в componentDidUpdate и useEffect, я обнаружил, что они ведут себя по-разному. Обратите внимание, что я поместил console.log в функцию рендера, чтобы проверить значение состояния при повторном рендеринге. После первого рендеринга оба console.log выводят «test», что нормально. когда я обновил состояние, после второго рендеринга, то, что с использованием компонента класса распечатало «тест», то, что с использованием компонента функции распечатало «диск». useEffect () почти такой же, как componentDidUpdate (), они должны вызываться после завершения рендеринга, кажется, что componentDidUpdate имеет правильное поведение, но useEffect просто делает обратное. Я знаю, что неправильно менять состояние напрямую, все справочные материалы. Но значит ли это, что мы не можем полагаться на useEffect (), или мой мыслительный процесс с самого начала неверен? 

function changeCount(count) {
    count.character = "drive"
}

function Example() {

    let initialCount = {
        num: 0,
        character: "test"
    }
    const [count, setCount] = useState(initialCount);

    useEffect(() => {
        changeCount(count)
    })
    return (
        <div>
            {console.log(count)}
            <p>You clicked {count.num} times</p>
            <button onClick={() => setCount({ ...count, num: count.num + 1 })}>
                Click me
            </button>
        </div>
    )
}

ReactDOM.render(<Example />, mountNode);

class Example extends React.Component {
    // Declare a new state variable, which we'll call "count"
    constructor(props) {
        super(props)
        this.state = {
            num: 0,
            character: "test",
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({ ...this.state, num: this.state.num + 1 })
    }

    changeCount(count) {
        count.character = "drive"
    }
    componentDidUpdate() {
        this.changeCount(this.state)
    }

    render() {
        return (
            <div>
                {console.log(this.state)}
                <p>You clicked {this.state.num} times</p>
                <button onClick={this.handleClick}>
                    Click me
                </button>
            </div>
        )
    }

}

ReactDOM.render(<Example />, mountNode);
...