gpt4 book ai didi

javascript - 基于类的组件与功能组件有什么区别(Reactjs)

转载 作者:数据小太阳 更新时间:2023-10-29 03:52:37 24 4
gpt4 key购买 nike

<分区>

我是 React 的新手,我想清楚地知道应该使用哪一个,当涉及到组件时,我看到有两种类型。

功能组件:

import React from 'react'

const userInput = (props) => {
return(
<div>
<input type='text' onChange={props.nameChanged} value={props.username}></input>
</div>
)
};

export default userInput;

基于类的组件:

import React, { Component } from 'react';
import './App.css';
import UserOutput from './UserOutput/UserOutput';
import UserInput from './UserInput/UserInput';

class App extends Component {

render() {
return (
<div className="App">
<h3>Assignment Output :</h3>
<ul>
<li>
<UserOutput
username={this.state.Usernames[0].username}>
Welcome to React!
</UserOutput>
<UserInput
nameChanged={this.nameChangedHandler}>
</UserInput>
</li>
</ul>
</div>
);
}
}

export default App;

我读到我们应该始终尝试使用功能组件,因为它在某些方面有帮助,而且我还听说我们应该避免使用基于类的组件作为尽可能多。

我很困惑哪个是对的,哪个不是。

为什么要尽可能使用函数式组件,有什么好处?

我们什么时候应该使用功能组件,什么时候不需要,目前还不清楚。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com