前端 - 请问定义方法在组件内和定义在组件外有什么区别呢？还是都可以？

Question

在写React的时候发现有一个细节，我们可以定义方法在组件外也可以定义在组件内，比如searchPages，

import React, { useEffect } from 'react'const searchPages = () => {  }function SearchComp() {  useEffect(() => {  }, [])  return (    <div>SearchComp    </div>  )}export default SearchComp

请问定义在组件内和定义在组件外有什么区别呢？还是都可以？

Answer 1

写在组件内部主要是为了便于通过作用域链访问组件内定义的变量和方法：

function TestComponent(){  const [pages, setPages] = useState([]);  useEffect(() => {    fetch("path/to/pages").then(async (res) => {      const { info } = await res.json();      // 这里访问了组件内定义的方法 setPages      setPages(info);    });  },[]);  return <span>xxxx</span>}

上述方法如果要搬到组件外，可以这样写：

const genarateEffectCallback = setPages => () => {  fetch("path/to/pages").then(async (res) => {    const { info } = await res.json();    // 这里的 setPages 由外界传入    setPages(info);  });}function TestComponent(){  const [pages, setPages] = useState([]);  useEffect(genarateEffectCallback(setPages), []);  return <span>xxxx</span>}