React Hooks 实现一个搜索功能

import stores from './stores' // 事先准备好的接口库
import _ from 'loadsh'; // 使用 debounce，实时得到接口需要 debounce 

class Search extend Component{
    featchList = async (val = '')=>{
        try{
            const data = await stores.featchList(val);
            
            data && this.setState({
                data
            })
        }catch(err){
            throw(err)
        }
    }

    handleOnSearch = (ev)=>{
        console.log(ev);
        
        this.featchList(ev.target.value)
    }
    
    componentDidMount(){
        this.featchList();
    }
    
    render(){
        "search-container">
            <input onChange={_.debounce(ev => this.handleOnSearch(ev), 300)}/>
            <div className="list">
                {this.state.data}
            div>
        div>
    }
}
复制代码

cakkBackFunc 可以返回一个函数，用作清理

array（可选参数）：数组，用于控制useEffect的执行
* 分三种情况
    《1》空数组，则只会执行一次（即初次渲染render），相当于componentDidMount
    《2》非空数组，useEffect会在数组发生变化后执行
    《3》不填array这个数组，useEffect每次渲染都会执行

function App() {
  const [data, setData] = useState([]);
  const [query, setQuery] = useState('');

  useEffect(() => {
    const featchList = async (query = '')=>{
        try{
            const data = await stores.featchList(query);
            
            data && setData(data);
        }catch(err){
            throw err;
        }
    }

    featchList(query); // 我们把 query 当做参数传进去，把data和query 联动起来这样就可以达到搜索的功能啦。
  }, []);

  return (
    <div className="search-container">
        <input onChange={_.debounce(ev => setQuery(ev.target.value), 300)}/>
        <div className="list">
            {this.state.data}
        div>
    div>
  );
}

export default App;
复制代码

我们提供了一个 `exhaustive-deps ESLint` 规则作为 `eslint-plugin-react-hooks`
包的一部分。它会帮助你找出无法一致地处理更新的组件。

function App() {
  const [data, setData] = useState([]);
  const [query, setQuery] = useState('');

  useEffect(() => {
    const featchList = async (query = '')=>{
        try{
            const data = await stores.featchList(query);
            
            data && setData(data);
        }catch(err){
            throw err;
        }
    }

    featchList(query); // 我们把 query 当做参数传进去，把data和query 联动起来这样就可以达到搜索的功能啦。
  }, [query]); // 随着 query 的变化，重新 mount，获取新的搜索的数据

  return (
    ....
  );
}

export default App;
复制代码

function ProductPage({ productId }) {
  const [product, setProduct] = useState(null);

  async function fetchProduct() {
    const response = await fetch('http://myapi/product' + productId); // 使用了 productId prop
    const json = await response.json();
    setProduct(json);
  }

  useEffect(() => {
    fetchProduct();
  }, []); //