React: 函数式组件

1. 简介

函数式组件本质上就是一个JS函数

作为一个组件，至少包括一些结构代码

2. 示例代码

3. 运行原理

1. ReactDOM.render解析组件标签
2. 解析到组件为函数式组件，调用该函数，将返回的虚拟DOM转为真实DOM呈现在页面
3. 普通JS函数中的this指向的是window对象，babel将JSX代码翻译为JS代码时，开启的严格模式（use strict）,此时函数中的this的值为undefined

4. hooks扩展

1. State Hook

可以让函数组件有state状态,并对状态进行读取和更新

语法: const [count,setCount] = React.useState(0);

• number: 指定状态的数据类型
• 0: 状态的初始值
• count: 状态名称,可以通过该字段引用状态的属性值
• setCount: 用于更新状态的函数,有两种写法:

1. 传入一个状态值,覆盖原来的状态值
2. 传入一个函数,函数的入参为原来的状态值,函数必须有返回值,返回值作为新的状态值

• 调用setCount函数更新时会触发组件的重新render,内部会缓存每个状态对应的值,保证状态值不丢失

2. Effect Hook

在函数的指定操作之前执行指定函数,类似于类式组件的生命周期函数

语法:

useEffect(() => { 
          // 在此可以执行任何带副作用操作
          doSomething()
          return () => { // 在组件卸载前执行
            // 在此做一些收尾工作, 比如清除定时器/取消订阅等
          }
        }, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

• 第一个参数为一个函数,在组件挂载后会执行该函数的内部逻辑,相当于 componentDidMount
• 若第一个函数返回了一个新的函数,在组件卸载前会执行这个返回的函数,相当于 componentWillUnmount
• 第二个参数为一个数组,组件会监听数组中的对象,这些对象发生变化时会重新渲染组件,相当于 componentDidUpdate

1. 若不传数组参数,则默认监听所有的useState,任意一个发生变化则重新渲染组件
2. 若传一个[]空数组,则表示不进行监听,回调函数只在第一次render后执行一次
3. 若在数组内传入其他对象,则该对象发生变化时重新渲染组件

3. Ref Hook

在函数组件中存储任意标签对象,功能和类式组件中的React.createRef()一样

语法:

const myRef = React.useRef() <input type="text" ref={myRef}/>

通过myRef可以获取input标签