vuer to react learning 1-useState

159 阅读1分钟

setState

`this``.setState({`

`  ``count: ``this``.state.count + 1`

`}, () => {`

`  ``console.log(``this``.state.count); ``// 这里是监控到的最新值`

`})`

useState

`const [ count, setCount ] = useState(0);`

`setCount(1);`

useEffect 上面例子中,useState()用来生成一个状态变量(data),保存获取的数据;useEffect()的副效应函数内部有一个 async 函数,用来从服务器异步获取数据。拿到数据以后,再用setData()触发组件的重新渲染。


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

function App() {
  const [data, setData] = useState({ hits: [] });

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1/search?query=redux',
      );

      setData(result.data);
    };

    fetchData();
  }, []);

  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}

export default App;

Effect Hook 相当于componentDidMount、componentDidUpdate和componentWillUnmount的组合体。
默认情况下,useEffect会在第一次渲染之后和每次更新之后执行,每次运行useEffect时,DOM 已经更新完毕。
为了控制useEffect的执行时机与次数,可以使用第二个可选参数施加控制

  • 每次执行后更新
function AComponent(props){
    React.useEffect(()=>{
        console.log("每次更新后对会执行");
    });
}
  • 某状态变化后再执行
function AComponent(props){
    React.useEffect(()=>{
        console.log("一次执行后,allNumber 值发生变化后会再次执行");
    },[allNumber]);
}
  • componentDidMount 与 componentWillUnmount 传递一个空数组([])作为第二个参数,这个 Effect 将永远不会重复执行,因此可以达到componentDidMount的效果。
    useEffect可以返回一个函数,该函数将在组件被卸载时的执行,可以等效于componentWillUnmount
function AComponent(){
    React.useEffect(()=>{

        console.log("componentDidMount");
       
        return function cleanup() { console.log("组件被卸载componentWillUnmount")};
    },[]);
}
useRef
function AComponent(){
    const blockRef= React.useRef();
    return(
        <div ref={blockRef} onClick={()=>{console.log(blockRef.current)}}>
            useRef
        </div>
    )
}