Day 10 state & props -1

哇喔~第 10 天~ 破个位数了!

今天来介绍一下前面提到的 props & state


我们知道 React Element 是描述关於此节点最终输出的画面资讯,

那在 React Element 到真实画面的过程,我们就叫做 render

所以像这样,

const App = () => {
  return (
    <SafeAreaView>
      <Text>Hello World~!!</Text>
    </SafeAreaView>
  );
};

最後画面输出的是:
https://ithelp.ithome.com.tw/upload/images/20210925/201128784fdeNJIZUG.png

但画面不是静态的,它是会根据不同的情境去产生变化的,

那每一次画面的变化,就被称做 re-render

那要如何产生 re-render

我们前面有说过, Component 是具有封闭性

所以有之分,

  • 内部设定 state 控制
  • 外部由内部开放 props 来间接干涉运作

那这两个的特性是:

state

  • 代表 component 内部需保存的数据,会影响内部 rendering or data flow
  • 封装在 component 内部, 不会直接流传到外部
  • 一个纯物件参数,key-value 形式 ,内容应该是可序列化
  • 除了初始化,否则不应该直接改动 state

初始化设定

  • constructor
class App extends Component {
  constructor() {
    super();
    this.state = {
      todoList: [],
    };
  }
}
  • 外部
class App extends Component {
  state = {
    todoList: [],
  };
}

<<:  Day 23: Jenkins与分散式部属

>>:  Day 10 - React-JSX

Day 2:Kotlin 程序设计基础入门 (1)

本篇文章同步发表在 HKT 线上教室 部落格,线上影音教学课程已上架至 Udemy 和 Youtu...

DAY12支持向量机演算法(续一)

昨天介绍完SMO算法第一步,今天就要来写这个方法第二步, 而第2步步骤:选取两个点,并计算上下界H和...

Day 29 |> Elixir 并行性 (三)

Agent Agent 模组提供了我们可以实践一个基本的服务器的一个 API 的功能。 可以让我们在...

Day16 RTCPeerConnection: Offer / Answer

在前面的文章中,已经对 WebRTC 相关的重点进行了介绍,包含网络协商、媒体协商、如何进行网路穿透...

Swift纯Code之旅 Day26. 「客制化Switch按钮」

前言 我们可以到Switch开启时背景色会是绿色,关掉时却是黑色,这样其实跟原本IPhone内建的也...