[Day30] React - 浅谈 Component 的State

React Component 只能透过资料状态的改变来更新 UI,而 React 元件有两种资料来源:

  • Props: 透过外部(父元件)传进来的元件,是唯读 (read-only) 的资料
  • State: 元件内部控制自己的状态 ,是可以自由读写的。

每当 React 侦测到 Props 或 State 有更新时,元件就会重新渲染一次

state 即是元件的状态,可记住元件的一些资料,透过state来保存、控制以及修改自己可变的状态。

  1. this.state ⇒ 在class component下设定state初始值

  2. useState ⇒ 在functional component下设定state初始值

    useState 会回传一个array [],里面包含两个值,第一个值是 state、第二个值是用来更新 state 的 函式 。每当 state 值改变,就会触发 re-render (重新渲染)。

    const MyComponent = () => {
      const [inputValue, setInputValue] = React.useState('[email protected]');
      return (
        <>
          <input
            value={inputValue}
            onInput={(e) => {
              const newValue = e.target.value;
              setInputValue(newValue);
            }}
          />
          <p>我的email: {inputValue}</p>
        </>
      );
    };
    

<<:  如何衡量万事万物 (9) 偏好与态度

>>:  终於 30 天了,可以偷懒了ㄅ

Laravel Queue Job:深入理解 timeout 的运作

work 和 listen 的差别 让 queue work 开始执行任务的指令有两个:work 和...

Day7 什麽是JSX?

这个看起来很像HTML的标签语法,但实际上他是JavaScript的语法所扩充出来的 JSX语法 c...

[NestJS 带你飞!] DAY15 - Dynamic Module

前面有介绍过 Module 的一些基本使用方式,然而有一项非常强大的功能没有被提及,就是 动态模组(...

如何将 OLM 导入 Excel 并附上附件?

摘要:要不要将OLM 导入到带有附件的Excel 中?如果是这种情况,您的搜索现已完成。这篇文章将向...

Day 19 Flask Cookie

讲完前端之後,就一定要说到 Cookie 跟 Session 这两个东西了,这两个是什麽东西呢?又能...