一份傳男也傳女的 React Native 學習筆記

時間 2019-11-06

標籤一份 react native 學習筆記欄目 React 简体版

原文原文鏈接

學習就如同長跑，要想跑的遠，就不能跑得太快。javascript

背景介紹

這段時間瞭解了一些前端方面的知識，而且用 React Native 寫了一個簡易新聞客戶端 Demo。css

React Native 和原生開發各有所長，具體就不細說。混合使用能充分發揮各自長處，惟一的缺憾就是 React Native 和原生通訊過程相對不那麼友好。html

在這裏分享一下學習過程當中我的認爲比較重要的知識點和學習資料，本文儘可能寫得輕一些，但願對讀者可以有所幫助。前端

預備知識

有些前端經驗的小夥伴學起 React Native 就像老馬識途，東西都差很少，變來變去也玩不出什麼花樣。html5

HTML5：H5 元素對比 React Native 組件，使用方式一模一樣。java

CSS：React Native 的 FlexBox 用來爲組件佈局的，和 CSS 親兄弟關係。react

JavaScript：用 JavaScript 寫，能不瞭解一下嗎？ JavaScript 之於 React Native 就如同磚瓦之於摩天大樓。ios

React JSX：React 使用 JSX 來替代常規的 JavaScript。JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。git

1、開始學習 React Native

React Native 社區相對比較成熟，中文站的內容也比較全面，從入門到進階，環境安裝到使用指南，學習 React Native 推薦從官網 reactnative.cn 開始。FlexBox 佈局、組件、API 建議在該官網查看，注意網頁頂部能夠切換 React Native 的歷史版本。github

1.1 安裝開發環境

React Native 官網推薦搭建開發環境指南傳送門。(記得設置 App Transport Security Settings ，容許 http 請求)
已創建原生項目，將 React Native 集成到現有原生項目傳送門
基於第2點，React Native 與原生混編的狀況下，React Native 與原生如何通訊傳送門
在 IDE 選擇這一點上，不要過多糾結，我的使用 WebStorm ，比較省心。

1.2 生命週期

class Clock extends React.Component {
  // 構造函數 一般進行一些初始化操做 如定義 state 初始值
  constructor(props) {
    super(props);
  }
  
  // 組件已掛載
  componentDidMount() {}
  
  // 組件即將被卸載
  componentWillUnmount() {}
  
  // 渲染函數 
  render() {
    return (
      <View></View>
    );
  }
}
複製代碼

1.3 Props 與 State

一個組件全部的數據來自於 Props 與 State ，分佈是外部傳入的屬性和內部狀態。

Props 是父組件給子組件傳遞數據用的，Props 由外部傳入後沒法改變，能夠同時傳遞多個屬性。

// 父組件 傳遞一個屬性 name 給子組件
<Greeting name='xietao3' />

// 子組件使用父組件傳遞下來的屬性 name
<Text>Hello {this.props.name}!</Text>
複製代碼

State ：用來控制組件內部狀態，每次修改都會從新渲染組件。

// 初始化 state
constructor(props) {
    super(props);
    this.state = { showText: 'hello xietao3' };
}

// 使用 state
render() {
    // 根據當前showText的值決定顯示內容
    return (
      <Text>{this.state.showText}</Text>
    );
}

// 修改state，觸發 render 函數，從新渲染頁面
this.setState({showText: 'hello world'});
複製代碼

舉個栗子(若是理解了就跳過吧)：

咱們使用兩種數據來控制一個組件：props 和 state。 props 是在父組件中指定，並且一經指定，在被指定的組件的生命週期中則再也不改變。對於須要改變的數據，咱們須要使用 state 。

通常來講，你須要在 constructor 中初始化 state ，而後在須要修改時調用setState方法。

假如咱們須要製做一段不停閃爍的文字。文字內容自己在組件建立時就已經指定好了，因此文字內容應該是一個 prop 。而文字的顯示或隱藏的狀態（快速的顯隱切換就產生了閃爍的效果）則是隨着時間變化的，所以這一狀態應該寫到 state 中。