【无标题】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、react传参？

传参的方式有以下三种：
1. 在父组件中通过 props 传递给子组件；
2. 在父组件中定义函数，将函数通过 props 传递给子组件，子组件通过回调函数将参数传递回父组件；
3. 使用 React 提供的上下文 API 来完成组件间参数传递。

// 父组件
class ParentComponent extends React.Component {
    onChildChanged(newName) {
        // 接收参数
        console.log(newName);
    }
    render() {
        return (
            <ChildComponent
                name={this.state.name}
                onChanged={this.onChildChanged.bind(this)}
            />
        );
    }
}

// 子组件
class ChildComponent extends React.Component {
    handleChange(event) {
        // 调用父组件传递函数
        this.props.onChanged(event.target.value);
    }
    render() {
        return (
            <input type="text" onChange={this.handleChange.bind(this)} />
        );
    }
}

二、react生命周期

1. constructor()：此函数用于初始化 state，只在组件创建时调用一次；

2. static getDerivedStateFromProps()：此函数用于更新 state，在每次接收新的 props 时调用，可以用来改变 state；

3. render()：此函数用于渲染组件，在每次更新 state 或 props 时调用；

4. componentDidMount()：此函数用于组件挂载后执行后续操作，只在组件创建时调用一次；

5. shouldComponentUpdate()：此函数用于控制组件是否重新渲染，在每次更新 state 或 props 时调用；

6. getSnapshotBeforeUpdate()：此函数在 render 函数之后，componentDidUpdate 之前调用，可以获取 DOM 更新前的快照；

7. componentDidUpdate()：此函数用于在组件更新后执行后续操作，在每次更新 state 或 props 时调用；

8. componentWillUnmount()：此函数用于组件卸载前执行后续操作，只在组件卸载时调用一次。

2.读入数据

代码如下（示例）：

useState：它用于在 React 组件中声明一个状态变量，并可以在组件内部进行更新；

useEffect：它用于在 React 组件中添加副作用，副作用指的是组件挂载或更新时需要执行的操作，如获取数据、操作 DOM、订阅事件等。