В этом примере у меня есть этот класс реакции:
class MyDiv extends React.component
constructor(){
this.state={sampleState:'hello world'}
}
render(){
return <div>{this.state.sampleState}
}
}
Вопрос в том, смогу ли я добавить к нему хуки React. Я понимаю, что React-Hooks является альтернативой стилю React Class. Но если я хочу медленно перейти на хиты React, могу ли я добавить полезные хуки в классы?
Компоненты высокого порядка - вот как мы делали подобные вещи, пока не появились крючки. Вы можете написать простую обертку компонента высокого порядка для своей ловушки.
function withMyHook(Component) {
return function WrappedComponent(props) {
const myHookValue = useMyHook();
return <Component {...props} myHookValue={myHookValue} />;
}
}
Хотя на самом деле это не использование перехватчика непосредственно из компонента класса, это по крайней мере позволит вам использовать логику перехвата из компонента класса без рефакторинга.
class MyDiv extends React.Component {
render(){
const myHookValue = this.props.myHookValue;
return <div>{myHookValue}</div>;
}
}
MyDiv = withMyHook(MyDiv);
Компоненты класса не поддерживают хуки -
Согласно Hooks-FAQ:
Вы не можете использовать Hooks внутри компонента класса, но вы определенно можете смешивать классы и функциональные компоненты с Hooks в одном дереве. Является ли компонент классом или функцией, использующей Hooks, - это деталь реализации этого компонента. В более долгосрочной перспективе мы ожидаем, что хуки будут основным способом написания компонентов React.
Крючки предназначены не для классов, а для функций. Если вы хотите использовать хуки, вы можете начать с написания нового кода в качестве функциональных компонентов с хуками
Согласно React FAQ
Вы не можете использовать Hooks внутри компонента класса, но вы определенно можете смешивать классы и функциональные компоненты с Hooks в одном дереве. Является ли компонент классом или функцией, которая использует Hooks, - это деталь реализации этого компонента. В более долгосрочной перспективе мы ожидаем, что хуки будут основным способом написания компонентов React.
const MyDiv = () => {
const [sampleState, setState] = useState('hello world');
render(){
return <div>{sampleState}</div>
}
}
React Hooks позволяет использовать функции реакции и жизненный цикл без написания класса. Это похоже на эквивалентную версию компонента класса с гораздо меньшим и удобочитаемым форм-фактором. Вы должны перейти на хиты React, потому что это интересно писать. Но вы не можете написать обработчики реакции внутри компонента класса, как это было введено для функционального компонента.
Это может быть легко преобразовано в:
class MyDiv extends React.component
constructor(){
this.state={sampleState:'hello world'}
}
render(){
return <div>{this.state.sampleState}
}
}
const MyDiv = () => {
const [sampleState, setSampleState] = useState('hello world');
return <div>{sampleState}</div>
}
Как уже объясняли другие ответы, API-интерфейс hooks был разработан для обеспечения функциональных компонентов функциональностью, которая в настоящее время доступна только в компонентах класса. Крючки не должны использоваться в компонентах класса.
Компоненты класса могут быть написаны для облегчения перехода к функциональным компонентам.
С одним состоянием:
class MyDiv extends Component {
state = {sampleState: 'hello world'};
render(){
const { state } = this;
const setState = state => this.setState(state);
return <div onClick={() => setState({sampleState: 1})}>{state.sampleState}</div>;
}
}
преобразуется в
const MyDiv = () => {
const [state, setState] = useState({sampleState: 'hello world'});
return <div onClick={() => setState({sampleState: 1})}>{state.sampleState}</div>;
}
Обратите внимание, что useState состояния useState не объединяет свойства состояния автоматически, это должно быть покрыто setState(prevState => ({...prevState, foo: 1 }));
С несколькими состояниями:
class MyDiv extends Component {
state = {sampleState: 'hello world'};
render(){
const { sampleState } = this.state;
const setSampleState = sampleState => this.setState({ sampleState });
return <div onClick={() => setSampleState(1)}>{sampleState}</div>;
}
}
преобразуется в
const MyDiv = () => {
const [sampleState, setSampleState] = useState('hello world');
return <div onClick={() => setSampleState(1)}>{sampleState}</div>;
}
Компоненты с сохранением состояния или контейнеры или компоненты на основе классов всегда поддерживают функции React Hooks, поэтому нам не нужно использовать React Hooks в компонентах Stateful только в компонентах без сохранения состояния.
Некоторая дополнительная информация
Что такое React Hooks? Так что же такое крючки? Крючки для скважин - это новый способ или предлагают нам новый способ написания наших компонентов.
Пока, конечно, у нас есть функциональные и основанные на классах компоненты, верно? Функциональные компоненты получают реквизиты, и вы возвращаете некоторый код JSX, который должен быть отображен на экране.
Они отлично подходят для представления, поэтому для визуализации части пользовательского интерфейса, не столько в отношении бизнес-логики, а в типичном случае они ориентированы на одну или несколько целей для каждого компонента.
Компоненты на основе классов, с другой стороны, также будут получать реквизиты, но они также имеют это внутреннее состояние. Поэтому основанные на классах компоненты - это компоненты, которые на самом деле содержат большую часть нашей бизнес-логики, поэтому под бизнес-логикой я имею в виду такие вещи, как создание HTTP-запроса, и нам нужно обработать ответ и изменить внутреннее состояние приложения или, возможно, даже без HTTP. Пользователь заполняет форму, и мы хотим показать это где-то на экране, нам нужно состояние для этого, нам нужны компоненты на основе классов, и поэтому мы также обычно используем компоненты на основе классов для управления другими нашими компонентами и передачи нашего состояния вниз в качестве реквизита для функциональных компонентов, например.
Теперь одна проблема, которую мы имеем с этим разделением, со всеми преимуществами, которые он добавляет, но одна проблема, которую мы имеем, состоит в том, что преобразование из одной компонентной формы в другую раздражает. Это не очень сложно, но это раздражает.
Если вы когда-либо оказывались в ситуации, когда вам нужно было преобразовать функциональный компонент в основанный на классах, это много печатает и много печатает всегда одни и те же вещи, так что это раздражает.
Большая проблема в кавычках заключается в том, что хуки жизненного цикла может быть трудно использовать правильно.
Очевидно, что нетрудно добавить componentDidMount и выполнить там некоторый код, но зная, какой хук жизненного цикла использовать, когда и как правильно его использовать, это может быть сложно, особенно в более сложных приложениях и в любом случае, было бы неплохо, если бы мы Был ли один способ создания компонентов, и этот суперкомпонент мог обрабатывать как состояния, так и побочные эффекты, такие как HTTP-запросы, а также отображать пользовательский интерфейс?
Ну, это именно то, что крючки все. Крючки дают нам новый способ создания функциональных компонентов, и это важно.
Это не будет возможно с вашими существующими компонентами класса. Вы должны будете преобразовать ваш компонент класса в функциональный компонент, а затем сделать что-то вроде:
function MyDiv() {
const [sampleState, setSampleState] = useState('hello world');
return (
<div>{sampleState}</div>
)
}
Для меня React.createRef() был полезен.
напр.:
constructor(props) {
super(props);
this.myRef = React.createRef();
}
...
<FunctionComponent ref={this.myRef} />
Исходная запись здесь.