初识：react-hooks

第一节-setState

import React, { useState } from 'react';
const ClickCount = () => { 
 const [num, setNum] = useState(0);  
 const [count, setCount] = useState(() => 0); 
 const handleClick = () => {  
  setNum(num + 1);  
  setCount(count + 2); 
 }  return (  
  <div>     
     <p>count:{count}</p>      
     <p>num:{num}</p>    
     <button onClick={handleClick}>+1</button> 
  </div>  
)}
function App() { 
 return (  
  <div className="App"> 
     <ClickCount />   
  </div>  );
}
export default App;

第二节 -useEffect

import React, { useState, useEffect } from 'react';

const Fetch = () => { 
 const [result, setResult] = useState(null); 
 useEffect(() => { 
   fetch('./index.js').then((res) => (res.text())).then(res => {  
    console.log('&&&&111111'); 
     setResult(res);  
  })}, [result]); 
 //result 变化就渲染一次，如果[],代表没有变化，因此只渲染一次
  return (   
 <div>  
    <p>result:{result}</p>
 </div>  );
}
const Count = () => { 
 const [count, setCount] = useState(() => 0); 
 useEffect(() => {   
 const timer = setInterval(() => { 
 console.log(count);  
 setCount(count + 1);  
  }, 500);   
 return () => clearInterval(timer) 
 }, [count]); 
 // count 不写的话，永远都是1，函数内部状态都需要写依赖  
 // 不能用在条件语句中添加useEffect,也不能在条件语句后面使用 否则组件会提前结束，导致状态错乱 
 // if(count>5){  
 //   useEffect(() => {}); 
 // }  
 // if(count>5)
 // { } 
 // useEffect(() => {});
  return (   
 <div>     
 <p>count:{count}</p> 
 </div>  )}
function App() { 
 return (   
 <div className="App">  
    <Fetch />   
    <Count />  
 </div>  );}

export default App;

第三节 useRef

import React, { useState, useEffect, useRef } from 'react';
const Count = () => { 

 const [count, setCount] = useState(() => 0);
 const countRef = useRef(null); 
 const btnRef = useRef(null);

 useEffect(() => {
 const handlOnclick = () => {
      setCount(count + 1)    
}   
 btnRef.current.addEventListener('click', handlOnclick, false)
   return () => 
 btnRef.current.removeEventListener('click', handlOnclick, false)  }, 
[count]) 
 return (    <div>
      <p>count:{count}</p>   
   {/* <button onClick={handleClick}>+2 </button> */} 
     <button ref={btnRef}>+3</button> 
   </div>  )}
function App() {  
return (   
 <div className="App">   
   <ClickCount />  
   <Fetch /> 
   <Count />  
 </div> 
 );

}
export default App;