react 入门教程（react入门教程 pdf）



React 的函数组件是 React 组件的另一种定义方式，两种方式都可以用于定义组件，但是相比于类组件，函数组件要更简单好用些。

组件名一般要大写，是为了在组件使用时与一般的 html 标签区分开

函数组件的创建方式就是定义一个函数，这个函数 return React组件。因此，返回一个 React 元素的函数就是组件。在 ES6 语法中，函数有两种定义方式，普通函数和箭头函数，因此，函数组件的方式也是两种。

函数接收外部数据的方式就是在函数的参数里拿到，如下：

函数组件没有 state，React v16.8.0 推出了 Hooks API，提供了  API解决了此问题。

函数组件的 state 数据的设置和获取是提供了一个接口 React.useState(初始值)，用于设置 state 的初始值，对 state 进行初始化。函数里面的参数为初始值，函数返回一个数组，数组的第一个是读数据方式，第二个是写数据方式。读数据变量命名为 xx 时，写数据方式一般命名为 setXX。

或者是先引入 useState，后面就不用再加 React. 了

同样的，setN 也是一个异步函数，不会立马执行。和 setState 不同的是，setState 是等一会后会改变 state ，而 setN 是永远不会改变 n，而是产生新的 n。

函数组件的 state 的写和 class 类组件的写是完全不同的，函数组件的 setState 不会自动合并之前的值。如下：

而且，函数组件的 setState 在接受同一个 state 对象时，即使其对象里的属性变了，但对象地址没变，是不会更新视图的。

应该产生一个新的 state 对象传入：

函数中的 setState 注意事项：

1. 不会自动合并属性

2. 地址一定要变

函数组件同样地没有生命周期，但是 React Hooks API 提供了  来解决此问题。

第一个参数是在特定时机到的时候执行的回调函数，第二个参数是指明什么时机。

4.1 模拟 componentDidMount 第一次渲染

在第二个参数为  时只会在第一次渲染时执行

4.2 模拟 componentDidUpdate （不完全模拟）

在第二个参数的数组里加上要监听变化的数据就行，若不加数组，不传第二个参数，则会在 state 的任意一个属性改变时都会触发该函数回调

但是这样的模拟并不完全等同，因为该函数回调会在一开始在数据由未定义　undefined 到被赋值后会执行该回调函数。而 componentDidUpdate 不会再第一次渲染时执行。

因此可以 自定义 Hook 进行计数，正确模拟 componentDidUpdate 钩子，自定义  如下：

4.3 模拟 componentWillUnmount

模拟销毁前执行时期，是用函数里返回函数的方式。

4.4 其他组件的模拟

constructor 钩子的模拟就是在函数组件中，return 语句前的所有语句，这些语句都是在初始化函数组件的数据。

render 钩子就是函数组件中 return 返回的内容

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/26853.html