iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

React Native & Redux 初步探討系列 第 10

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 09 function ?? class ??
下一篇
Day 11 state & props -2
系列文
React Native & Redux 初步探討33

尚未有邦友留言

立即登入留言