如何将此RN代码转换为带有钩子的功能组件?

Question

我正在处理下面的代码。如何将类组件转换为带有钩子的功能组件?

https://www.freecodecamp.org/news/functional-vs-class-components-react-native/

Answer 1

在你分享的这个网站上有组件的定义函数和类所以我不能解释我只是复制了这个类组件

class App extends Component {
constructor () {
super();
this.state = {
counter: 0
};
}
incrementCount () {
this.setState({
counter: this.state.counter + 1
});
}
decrementCount () {
this.setState({
counter: this.state.counter - 1
});
}
render () {
return (
<View>
<Text>Count: {this.state.counter}</Text>
<Button onPress={this.decrementCount.bind(this)}>-</Button>
<Button onPress={this.incrementCount.bind(this)}>+</Button>
</View>
);
}
}

，现在我要把它转换成一个功能组件:

import { useState } from "react";
function App () {
const [counter, setCounter] = useState(0) //<< replaced with this.state
const incrementCount =()=> {
setCounter(counter+1)
}
const decrementCount =()=> {

setCounter(counter-1)
}
return (
<View>
<Text>Count: {counter}</Text>
<Button onPress={decrementCount}>-</Button>
<Button onPress={incrementCount}>+</Button>
</View>
);
}