Рефакторинг из хуков в компонент класса - PullRequest
Новая
       9

Рефакторинг из хуков в компонент класса

0 голосов
/ 24 марта 2019

Не могли бы вы помочь с рефакторингом небольшого количества кода из React Hooks в компонент класса?Я новичок в React, и мне трудно.Я знаю, что {useState} предоставляет некоторые «getter» и «setter», но я не знаю, как преобразовать его в состояние с помощью реквизита в «типичном» компоненте класса React.

Hooks: 

export default function App() {
const [counter, setCounter] = useState([]);
}

Реагирует: 

class App extends React.Component {
state = {
counter:
}

Ответы [ 2 ]

1 голос
/ 24 марта 2019

Вы можете взглянуть на этот пример. Это типичный класс компонентов для приращения / подсчета. 

class App extends React.Component {
  state = { count: 0 }

  increment = () => {
      this.setState({
         count: this.state.count + 1
      });
  }

  render(){
     return(
    <button onClick={this.increment}>+</button>
    );
  }

}

export default App;

Вот его реализация Hooks. 

 function App(){
  const [count, setCount] = useState(0);

 const increment = () => {
    setCount(count+1);
  };

  return(
    <button onClick={increment}>+</button>
   );
 }
export default App;
0 голосов
/ 24 марта 2019

С реакции Страница часто задаваемых вопросов о крюках :

Должен ли я использовать крючки, классы или их комбинацию?
Когда вы 'Готовы, мы советуем вам попробовать Hooks в новых написанных вами компонентах.Убедитесь, что все члены вашей команды знакомы с ними и знакомы с этой документацией.Мы не рекомендуем переписывать существующие классы в Hooks, если вы не планируете их переписывать (например, для исправления ошибок).

Вы не можете использовать Hooks внутри компонента класса, но вы определенно можете смешивать классы иФункциональные компоненты с крючками в одном дереве.Является ли компонент классом или функцией, использующей Hooks, - это деталь реализации этого компонента. В более долгосрочной перспективе мы ожидаем, что хуки будут основным способом, которым люди пишут компоненты React .

для ответа на ваш вопрос, эквивалентный компонент класса будет: 

class App extends React.Component {
  state = {
    counter: [] // equivalent of useState([]);
  }
  ...
  this.setState(prevState => ({
    counter: [...prevState.counter, newelement]
  })) // equivalent of setCounter(counter => [...counter, newelement]);
}
...