Функции-члены с реагирующими хуками
Недавно я начал работать с хуками, и у меня есть относительно простой вопрос о «функциях-членах». Ранее функции-члены в классе реакции работали следующим образом:
class App extends React.Component {
constructor(props) {
this.state = { toggle: false };
this.toggle = this.toggle.bind(this);
}
// Member function
toggle() {
this.setState(toggle: !this.state.toggle);
}
render() {
<button onClick = {this.toggle}>Toggle Me!</button>
}
}
Однако теперь с React Hooks я не использую компоненты class, но мне все еще нужна функция для таких вещей. Это плохая практика делать что-то подобное? Если да, то какова наилучшая практика здесь?
const App = () => {
const [toggle, setToggle] = useState(false);
// Kind of like a "member" function
const toggleState = () => setToggle(!toggle);
return <button onClick = {toggleState}>Toggle Me!</button>;
}
Ответы 1
Ваш код выглядит хорошо. Это работает в абсолютном большинстве случаев, но если вы хотите создать функцию, которая запоминается между рендерами, вы можете использовать хук useCallback, чтобы, например. реквизиты, отправленные в PureComponent, будут одинаковыми и не вызовут ненужных рендеров.
const { useState, useCallback, PureComponent } = React;
const App = () => {
const [toggle, setToggle] = useState(false);
const toggleState = useCallback(() => setToggle(toggle => !toggle), []);
return (
<div>
<div>{toggle ? 'On' : 'Off'}</div>
<VeryExpensiveComponent onClick = {toggleState} />
</div>
);
};
class VeryExpensiveComponent extends PureComponent {
render() {
console.info("Rendered expensive component");
return <button onClick = {this.props.onClick}>Toggle Me!</button>;
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id = "root"></div>@ArberSylejmani Конечно, отсюда и «например». в моем ответе. Есть более одного случая, когда это уместно.
также бывают случаи, когда повторный рендеринг не создает проблем с производительностью, например, в вопросе, поэтому использование оптимизации useCallback стоит дороже, чем отсутствие оптимизации
вы можете использовать useMemo вместо PureComponent.