React 优化

减少不必要的渲染

类组件可以使用 PureComponent

 class Child2 extends PureComponent{}

函数组件类组件 React.memo(组件) React.memo是一个高阶组件

 let Memochild = React.memo(Child)

函数组件如果子组件依赖父组件的数据可以使用 useMemo

 let data =useMemo(()=>{     return {count}  },[count])

函数组件如果子组件依赖父组件的事件可以使用 useCallback

  const add = useCallback(() => {    setconut((count) => count + 1);  }, []);

使用hooks实现异步请求#

import React, { Fragment, useState, useEffect } from 'react';import axios from 'axios';function App1() {  const [data, setData] = useState({ hits: [] });  const [query, setQuery] = useState('redux');  const [url, setUrl] = useState(    'https://hn.algolia.com/api/v1/search?query=redux',  );  const [isLoading, setIsLoading] = useState(false);  useEffect(() => {    const fetchData = async () => {      setIsLoading(true);      const result = await axios(url);      setData(result.data);      setIsLoading(false);    };    fetchData();  }, [url]);  return (    <Fragment>      <input        type="text"        value={query}        onChange={event => setQuery(event.target.value)}      />      <button        type="button"        onClick={() =>          setUrl(`http://hn.algolia.com/api/v1/search?query=${query}`)        }      >        Search      </button>      {isLoading ? (        <div>Loading ...</div>      ) : (        <ul>          {data.hits.map(item => (            <li key={item.objectID}>              <a href={item.url}>{item.title}</a>            </li>          ))}        </ul>      )}    </Fragment>  );}export default App1;