Блог

Я новичок в React js и впервые внедряю эффект использования в своем коде. Я следил за несколькими учебниками, и они сделали все по-другому, как показано ниже

Дело l:

 function App() {

  const[counter,setCounter] = useState(0);
  const[toggle,setToggle] = useState(false); 

  const incrementer = () =>{
    // counter =1
    setCounter(counter   1);    
    console.log(counter)
  };

  const toggler = () =>{
    setToggle((toggle) => !toggle);
  };
  
  return (
    <div className="App">
      <h1 className = {toggle ? 'active' : ''} >Hello world!!</h1>
      <h1>{counter}</h1>
      <h1>{abc}</h1>
      <button onClick={incrementer} >Click</button>
      <button onClick={toggler}>Toggle Here</button>     
      
      
      <div className="home">
        <h1>{Date.time}</h1>
        <Nav/> 
        <Tweets/>
      </div>    
    </div>
  );
}
 

Здесь, внутри функции инкремента, я просто использую счетчик 1, и это дает требуемый результат и имеет смысл. Это увеличивает количество на 1 при каждом щелчке.

Теперь случай 2:

 function App() {  

  const[counter,setCounter] = useState(0);
  const[toggle,setToggle] = useState(false);
  

  const incrementer = () =>{
    
    setCounter(() => counter 1);
    console.log(counter)
  };

  const toggler = () =>{
    setToggle((toggle) => !toggle);
  };
  
  return (
    <div className="App">
      <h1 className = {toggle ? 'active' : ''} >Hello world!!</h1>
      <h1>{counter}</h1>
      <h1>{abc}</h1>
      <button onClick={incrementer} >Click</button>
      <button onClick={toggler}>Toggle Here</button>    
          
      <div className="home">
        <h1>{Date.time}</h1>
        <Nav/> 
        <Tweets/>
      </div>    
    </div>
  );
}
 

В этом случае внутри функции приращения используется то, что кажется функцией со стрелкой. Я предполагаю, что он использует функцию внутри функции. Кроме того, он ничего не передает, так как () пуст. Как здесь увеличивается количество. Я в замешательстве.

Также внутри функции переключения я могу написать abc или любую переменную вместо переключения, и это работает. Как??

Обновить

Хорошо, моя главная путаница заключается в этом коде.

 const incrementer = () =>{
    // counter =1
    setCounter((kkk) => kkk   1);
    // setCounter(() => counter 1);
    console.log(counter)
  };
 

Эта функция также работает. Как это значение kkk получает значение счетчика=0. Разве мы не должны писать счетчик вместо kkk??

Не только крючки react могут использовать функции со стрелками таким образом, но почти во всех случаях в Javascript. Может быть, мы могли бы найти объяснение в сравнении традиционных функций со стрелочными функциями