Как использовать новые функциональные хуки в React?

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

Я в настоящее время использую версию 16.6.0

Наконец-то я понял "крючки".

import React, {useState} from 'react';

const Fun = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );}

 export default Fun;

Я импортировал как Fun и использовал как в моем файле app.js

Ошибка, которую я сделал, заключается в том, что я не установил React v16.7.0-alpha, поэтому я установил с помощью npm add response @next реаги-dom @next.

Спасибо

Ответ 1

РЕДАКТИРОВАТЬ:

Хуки выпускаются как часть версии 16.8.0, и вы можете использовать их, установив React и React-dom 16.8.0

бежать

yarn install [email protected] [email protected]

установить. Для обновления отреагируйте на последнюю версию

yarn upgrade react react-dom

Хуков нет в версии 16.6.0, но это предложение для версии 16.7.0. Однако вы можете использовать 16.7.0-alpha.0 альфа-версию React для их тестирования.

Чтобы использовать это, установите вышеуказанную версию, используя

yarn add [email protected] [email protected]

Удостоверьтесь, что вы устанавливаете оба react и react-dom иначе вы получите предупреждение вроде

TypeError: Object (…) не является ошибкой функции при попытке использовать реагирующие хуки (альфа)

Ответ 2

Вы должны использовать версию 16.7.0-alpha.0 (или выше) для react и react-dom чтобы опробовать ловушки. Используйте следующий фрагмент для справки:

function App() {
  const [name, setName] = React.useState('Mary');
  return (
    <div>Name: 
      <input value={name} 
        onChange={(event) => setName(event.target.value)}
      />
      <p>{name}</p>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>