我可以将类组件更改为功能组件吗？ - 反应

Posted 2023-03-16

【中文标题】我可以将类组件更改为功能组件吗？ - 反应

【英文标题】：Can I change class component into functional component? - Reactjs

【发布时间】：2022-01-05 15:09:15

【问题描述】：

我使用类组件。只是测试它。现在我不知道如何将其转换为功能。这是我的代码：

class PostList extends Component 
   constructor(props) 
    super(props);
    this.state = 
      info: []
    ;
  

  componentDidMount() 
    axios
      .get("https://api2.binance.com/api/v3/ticker/24hr")
      .then((response) => 
        this.setState(
          info: response.data
        );
        console.log(response.data);
      );
  

  render() 
    const  info  = this.state;
    return (
      <div>
        <h2>post!</h2>
        info.map((user) => (
          <div key=user.symbol>
            <h6>user.priceChange</h6>
          </div>
        ))
      </div>
    );
  


export default PostList;

我应该在我的 redux 中使用这段代码，我需要将它转换成函数式组件

我想要这样的东西：

export const PostList = () =>
   return (
    //my code using axios,       
   )
```



 

【参考方案1】：

对于功能组件，你应该使用hooks而不是分类组件默认state和componentDidMount。因此，要定义新状态，您需要使用useState，而对于componentDidMount，您需要使用useEffect：

const PostList  = (props) => 
   const [state,setState] = useState(info:[]);
   useEffect(()=>
      axios
      .get("https://api2.binance.com/api/v3/ticker/24hr")
      .then((response) => 
        setState(
          info: response.data
        );
        console.log(response.data);
      );
     ,[])

  const  info  = state;
    return (
      <div>
        <h2>post!</h2>
        info.map((user) => (
          <div key=user.symbol>
            <h6>user.priceChange</h6>
          </div>
        ))
      </div>
    );



export default PostList;

【参考方案2】：

既然要使用函数式组件，就必须使用React Hooks！

在您的情况下，使用 useState 和 useEffect 挂钩可以帮助分别获得与 this.state 和 componentDidMount() 相同的结果。

const PostList  = (props) => 
   const [state,setState] = useState(info:[]);
   
   useEffect(()=>
      axios
      .get("https://api2.binance.com/api/v3/ticker/24hr")
      .then((response) => 
        setState(
          info: response.data
        );
        console.log(response.data);
      );
     ,[])

    return (
      <div>
        <h2>post!</h2>
        state.info.map((user) => (
          <div key=user.symbol>
            <h6>user.priceChange</h6>
          </div>
        ))
      </div>
    );



export default PostList;

【讨论】：

你能描述一下这个答案和给出的答案有什么区别吗？

对不起，我刚刚注意到有类似的答案。但是，我相信区别在于const info = this.state;。如果我错了，请纠正我，但由于它现在是一个功能组件，我们不再需要使用 this 关键字。此外，我们也可以只做一个state.info.map 来引用状态中的 info 属性