React Native是基于React的,在開發React Native過程中少不了的需要用到React方面的知識。雖然官方也有相應的Document,但篇幅比較多,學起來比較枯燥。
我可以說是從0開始學習React Native,之前學習的人少,自己也走了不少彎路,以后能把自己的一些想法或者是學習方法寫出來分享一下,讓后來學習的同行們少走一些彎路。(最好先學習一下reactjs)
自己理解的React(我們需要了解的東西)
1.React?
2.React的特點
3.JSX語法
4.組件(Component)
5.組件的屬性、狀態
一、什么是React?
React是一個用于組建用戶界面的JavaScript庫,讓你更加簡單的方式來創建交互式用戶界面。
個人認為的優點吧:
1.React就是由許多個組件來組合而成的。
2.數據改變的時候,React能高效的更新和渲染更新的組件。
3.聲明性視圖讓你的代碼容易調試,自己能預測出效果
4.封裝管理自己的狀態組件,將他們組成復雜的界面。
5.由于組件邏輯是用JavaScript編寫的,可以輕松地通過程序傳遞大量數據,并保持DOM狀態。
6.一次學習隨時隨地可以編寫,學會了React,不僅可以輕松的開發web,也可以用于React Native來開發Android+ios應用。
二、開始學習React
使用React之前需要在[React官網](https://facebook.github.io/react/downloads.html)下載這些庫,也可以將其下載到本地去使用。
-react.js
-react-dom.js
-browser.min.js
上面一共列舉了三個庫: react.js 、react-dom.js 和 browser.min.js ,它們必須首先加載。
react.js是React的核心庫
react-dom.js是提供與DOM相關的功能
browser.min.js的作用是將JSX語法轉為JavaScript語法
這一步很消耗時間,實際上線的時候,應該將它放到服務器完成。
注意:我們實際在做React Native開發時,這些庫作為React Native核心庫已經被初始化在node_modules目錄下,所以不需要單獨下載。
使用React寫出我們非常熟悉的Hello World
注意:ReactDOM.render 是 React 的最基本方法,用于將模板轉為 HTML 語言,并插入指定的 DOM 節點。
JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。
每一個XML標簽都會被JSX轉換工具轉換成純JavaScript代碼,使用JSX,組件的結構和組件之間的關系看上去更加清晰。
JSX并不是React必須使用的,但React官方建議我們使用 JSX , 因為它能定義簡潔且我們熟知的包含屬性的樹狀結構語法。
HTML標簽 與 React組件 對比
React 可以渲染 HTML 標簽 (strings) 或 React 組件 (classes)。
要渲染 HTML 標簽,只需在 JSX 里使用小寫字母開頭的標簽名。
//var myDivElement = <div className="foo">;
React.render(myDivElement, document.body);
要渲染 React 組件,只需創建一個大寫字母開頭的本地變量。
var MyComponent = React.createClass({/*...*/});
var myElement =<MyComponent someProperty={true} />;
React.render(myElement, document.body);?
注意:
- React 的 JSX 里約定分別使用首字母大、小寫來區分本地組件的類和 HTML 標簽。
- 由于 JSX 就是 JavaScript,一些標識符像 class 和 for 不建議作為 XML 屬性名。作為替代, React DOM 使用 className 和 htmlFor 來做對應的屬性。
JavaScript 表達式
要使用 JavaScript 表達式作為屬性值,只需把這個表達式用一對大括號 ({}) 包起來,不要用引號 (“”)。
// 輸入 (JSX):
var person =<Person name={window.isLoggedIn?window.name:''} />;
// 輸出 (JS):
var person = React.createElement(
? ? ? Person,
? ? ? {name: window.isLoggedIn ? window.name : ''}
);
React中注釋
JSX 里添加注釋很容易;它們是 JS 表達式。需要在一個標簽的子節點內(非最外層)用 {} 包圍要注釋的部分。
{/*標簽子節點的注釋*/}
注意:
在標簽內要使用{/*注釋的內容*/}
在標簽節點以外注釋,和通常的注釋是一樣的,多行用/*多行注釋的內容*/單行用//單行注釋的內容;
修改組件的屬性,會導致React不會對組件的屬性類型(propTypes)進行的檢查。從而引發一些預料之外的問題。
兩種寫法都能實現
不推薦的:
var component = <Component />;
component.props.foo = x;
component.props.bar = y;?