什么是Function Component ？
Function Component就是以Function的形式创建的React组件
export const WelcomeScreen = () => {
return (
<Box>
Hello world!
</Box>
);
};
也就是，一个返回了JSX的Function就可以当做是react组件，这种形式的组件就是Function Component。
什么是class component
export class WelcomeScreen extends Component {
render() {
return (
<Box>
<Text>You clicked {this.state.count} times</Text>
<Button onPress={this.log}>Click me</Button>
</Box>
);
}
}
什么是Hooks ？
它可以让你在不编写class的情况下使用state以及其他的React特性。
export const WelcomeScreen = () => {
const [count, setCount] = React.useState(0);
return (
<Box safeAreaY flex={1}>
<Text>You clicked {count} times</Text>
<Button onPress={() => setCount(count + 1)}>Click me</Button>
</Box>
);
};
useState返回的结果是数组，第一项是值，第二项是赋值函数。
举个例子：先赋值再setTimeout打印
1、我们可以将useState和setTimeout结合使用
2、创建一个按钮，点击后让计时器自增，但是延迟三秒在打印出来
export const WelcomeScreen = () => {
const [count, setCount] = React.useState(0);
const log = () => {
setCount(count + 1);
setTimeout(() => {
console.log(count);
}, 3000);
};
return (
<Box safeAreaY flex={1}>
<Text>You clicked {count} times</Text>
<Button onPress={log}>Click me</Button>
</Box>
);
};
那输出的结果会是
0
1
2
使用class component再实现一次
export class ChatScreen extends Component {
state = { count: 0 };
log = () => {
this.setState({
count: this.state.count + 1,
});
setTimeout(() => {
console.log(this.state.count);
}, 3000);
};
render() {
return (
<Box>
<Text>You clicked {this.state.count} times</Text>
<Button onPress={this.log}>Click me</Button>
</Box>
);
}
}
它输出的结果则是
3
3
3
为什么会打印不同的结果 Class component：
- 首先state是Immutable的，setState后一定会生成一个全新的state引用
- 但class component通过
this.state方式读取state，这就导致了每行代码都会拿到最新的state引用，所以打印出来的结果都是3 3 3
Function component：
- useState产生的数据也是Immutable，通过setCount原来的值就会形成一个新的引用在下次渲染时使用
- 但是由于没有使用this去读取，所以每次打印的都是当时渲染闭包环境的数据，虽然最新的值改变了但是在旧的渲染里状态依然是旧值
总结：
- function 组件与 class 组件最大的不同是 function 组件能够捕获渲染的值，而 class 组件因为 react 中 this 是可变的，所以总是能获取最新的 props。
2.function component属于无状态组件，这些组件不管理状态也没有任何副作用，但是可以使用react hook使function组件加入状态。
3.react官方更推荐使用function component
