React函数式组件及React常用hooks

React函数式组件及常用hooks

函数式组件

函数式组件简单介绍

• 函数式组件: 函数式组件本质就是一个普通函数, 接收一个props参数, 并返回一个 reactElement .

• 函数式组件中没有 this和生命周期函数, 不能使用 string ref

• 使用函数式组件时应该尽量减少在函数组件内部生命子函数, 否则, 每次组件更新时, 都会重新创建这个函数, 会导致性能比较差.

函数式组件案例代码演示: 一个简单的函数式组件

import React from 'react'
/**
 * 函数式组件: 本质就是一个函数
 *  - 函数接收一个参数: 参数是父组件传递过来的属性 props
 *  - 函数组件必须有一个返回值, 返回值是该组件要输出的内容.
 *  - 函数组件中没有this, 所以函数组件是一个无状态组件
 *  (16.8-) 无状态组件: 函数组件
 *      - 函数组件没有状态及生命周期
 *      - 函数组件也没有 this
 */

function Child(props) {
    
    console.log('子组件接收的props -->>',props);
    return(
        <div>
            <h2>我是子组件 -> {
    props.name}</h2>
        </div>
    )
}

function App() {
    
    return(
        <div>
            <h1>hello, React</h1>
            <Child name={
    "Gene"} />
        </div>
    )
}
export default App

React hooks(钩子)

React hooks 官网介绍

React hooks 是React 16.8 中新增的功能, 它们使得我们无需编写类即可使用状态和其他的 React 功能

React hooks的优势

• 简化组件的逻辑.
• 复用状态的逻辑.
• 无需使用类组件编写.

常用hook - useState

在 React 中, 通常 use 开头的都是hook, 所以后期我们自定义hook 的时候也是遵循这套规则.

useState 用来初始状态, 类似于类组件中的 state.

[state,setState] = useState(initState)
	- state 当前对应的状态
    - setState 修改 state 的方法
// useState 返回一个数组
   - 数组的第一项是初始的状态数据.
   - 数组的第二项是修改对应状态数据的方法.
    
// 注意,[state,setState], 数组中的 state和setState并不需要一定是这两个变量, 因为它是个数组,所以我们解构的时候只是按照数组对应的索引来结构,跟变量名称无关, 所以这里这两个变量是可以写成任意具有实际意义的其他变量名称的, 比如如下代码
    [name,setName] = useState('Gene')

useState 的使用案例代码如下:

import React,{
    useState,createRef} from 'react'
const inputRef = createRef()
function Child(props) {
    
    console.log('子组件接收的props--->',props);
    const {
    name,setName} = props;
    return(
        <div>
           <p>name:{
    name}</p>
            <form action="#">
                <input type="text"
                    value={
    name}
                    ref={
    inputRef}
                    onChange={