2022 React 最速上手指南(七)—— React state & 回调处理函数

简介: 2022 React 最速上手指南(七)—— React state & 回调处理函数

以结果为导向,写给刚学完前端三剑客和想要了解 React 框架的小伙伴,使得他们能快速上手(省略了历史以及一些不必要的介绍)。



React state


React props 用于父组件向子组件传递信息,也就是沿着组件树向下传递信息;React state 则用于实现应用的交互,我们可以通过交互来改变 state 。


首先我们可以从 React 中调用 useState() 去管理 state,在 React 中 useState 以及任何其他以 use开头的函数都被称为 hook,它们可以 “hook into” 不同的 React 特性。


但我们现在只需要关注 useState 这个 hook :


import React from "react";
const App = () => {
  const stories = [
    ...
  ];
  const [searchTerm, setSearchTerm] = React.useState("");
  ...
};
复制代码


useState() 采用一个初始 state 作为参数,也可以像这样使用一个空字符串。

同时它会返回包含两个值的数组,第一个值 searchTerm 表示当前 state;第二个值 setSearchTerm 是 state 的更新函数。


这种一个数组返回两个值的语法叫做【数组解构】,具体可以查看文档:解构赋值


  • 举个例子:


// 定义一个数组
const list = ['a', 'b'];
// 没用解构
const itemOne = list[0];
const itemTwo = list[1];
// 用了解构
const [firstItem, secondItem] = list;
// 如果 useState 不用解构
const searchTermState = React.useState('');
const searchTerm = searchTermState[0];
const setSearchTerm = searchTermState[1];
复制代码
  • 使用 state 进行交互,别忘了 import React


import React from "react";
const App = () => {
  const stories = [ ... ];
  const [searchTerm, setSearchTerm] = React.useState("");
  const handleChange = (e) => {
    setSearchTerm(e.target.value);
  };
  return (
    <div>
      <label htmlFor="search">Search: </label>
      <input id="search" type="text" onChange={handleChange} />
      <p>
        Searching for <strong>{searchTerm}</strong>
      </p>
      <hr />
      <List list={stories} />
    </div>
  );
};
...
复制代码


当用户在输入框输入内容时,内容会被处理函数捕获,然后使用 state 更新函数去设置新的 state。


在设置了新的 state 后,组件会被重新渲染,也就是组件函数会被再次执行,新的 state 会在组件的 JSX 中显示。


最后说一下:hook 一般只能在组件或者你自定义的 hooks 的【顶层】使用,你不能在条件,循环或者其他嵌套函数中调用它。在组件顶部 use 不同的 React 特性,就类似于在文件顶部 import 不同的模块。


JSX 回调处理函数


In a React app, every piece of UI is a component.


我们把输入框部分分离,作为一个独立的 Search 组件,并在 App 组件中创建一个示例,这样 Search 组件将成为 List 组件的兄弟组件:


const App = () => {
  const stories = [ ... ];
  return (
    <div>
      <Search />
      <hr />
      <List list={stories} />
    </div>
  );
};
const Search = () => {
  const [searchTerm, setSearchTerm] = React.useState("");
  const handleChange = (e) => {
    setSearchTerm(e.target.value);
  };
  return (
    <div>
      <label htmlFor="search">Search: </label>
      <input id="search" type="text" onChange={handleChange} />
      <p>
        Searching for <strong>{searchTerm}</strong>
      </p>
    </div>
  );
};
复制代码


独立出来的 Search 组件除了显示搜索项没有任何用处,由于 props 只能向下传递,所以它不能跟父组件或兄弟组件共享任何信息,但是我们可以引入回调函数:


const App = () => {
  const stories = [ ... ];
  // 1. 引入回调函数
  const handleSearch = (e) => {
    console.log(e.target.value); // 4. 实际调用
  };
  return (
    <div>
      {/* 2. 函数作为props传递 */}
      <Search onSearch={handleSearch} />
      <hr />
      <List list={stories} />
    </div>
  );
};
const Search = (props) => {
  const [searchTerm, setSearchTerm] = React.useState("");
  const handleChange = (e) => {
    setSearchTerm(e.target.value);
    props.onSearch(e); // 3. 使用回调函数
  };
  return (
    <div>
      ...
    </div>
  );
};
复制代码


我们把函数从 App 组件传递到子组件 Search 中,然后在 Search 组件中调用该函数,但它实际在父组件中被执行。


将组件中的回调处理函数通过 props 传递给下层组件,我们就可以在组件树中往上传递信息,与上层组件通信。

目录
相关文章
|
2月前
|
前端开发 开发者
React 函数组件与类组件对比
【10月更文挑战第4天】本文详细比较了React中的函数组件与类组件。函数组件是一种简单的组件形式,以纯函数的形式返回JSX,易于理解与维护,适用于简单的UI逻辑。类组件则是基于ES6类实现的,需要重写`render`方法并能利用更多生命周期方法进行状态管理。文章通过示例代码展示了两者在状态管理与生命周期管理上的差异,并讨论了常见的问题如状态更新异步性与生命周期管理的复杂性,最后给出了相应的解决方法。通过学习,开发者可以根据具体需求选择合适的组件类型。
63 8
|
3月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
76 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
3月前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
35 0
|
2月前
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
33 1
|
3月前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
52 2
|
3月前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
33 3
|
3月前
|
前端开发
react学习(17)回调形式的ref
react学习(17)回调形式的ref
|
3月前
|
前端开发
react学习(22)高阶函数和函数柯里化
react学习(22)高阶函数和函数柯里化
|
4月前
|
前端开发
React组件实例更改state状态值(四)
【8月更文挑战第14天】React组件实例更改state状态值(四)
48 1
React组件实例更改state状态值(四)
|
4月前
|
前端开发 JavaScript
React组件实例state(三)
【8月更文挑战第14天】React组件实例state(三)
31 1
React组件实例state(三)