1 搭建專案
安裝node.js環境
cd my-project
npm start
2 建立子元件的幾種方式
1）函式式定義
函式式定義的無狀態元件（負責根據傳入的props來展示，不涉及到要state狀態的操作）
特點元件不會被例項化，整體渲染效能得到提公升
因為元件被精簡成乙個render方法的函式來實現的，由於是無狀態元件，所以無狀態元件就不會在有元件例項化的過程，無例項化過程也就不需要分配多餘的記憶體，從而效能得到一定的提公升。
元件不能訪問this物件
無狀態元件由於沒有例項化過程，所以無法訪問元件this中的物件，例如：this.ref、this.state等均不能訪問。若想訪問就不能使用這種形式來建立元件
元件無法訪問生命週期的方法
因為無狀態元件是不需要元件生命週期管理和狀態管理，所以底層實現這種形式的元件時是不會實現元件的生命週期方法。所以無狀態元件是不能參與元件的各個生命週期管理的。
無狀態元件只能訪問輸入的props，同樣的props會得到同樣的渲染結果，不會有***
function showlist()
//直接訪問props)};
return ();}
2 ） es5原生方式react.createclass定義的元件
特點：react.createclass建立的元件，其每乙個成員函式的this都有react自動繫結，任何時候使用，直接使用this.method即可，函式中的this會被正確設定。
例子：import react from 'react';
import reactdom from 'react-dom';
var inputcontroles5 = react.createclass(,
defaultprops: ,
// 設定 initial state
getinitialstate: function() ;
},handlechange: function(event) );
},render: function()
});export default inputcontroles5;
3 ）es6形式的extends react.component定義的元件
特點：建立的元件，其成員函式不會自動繫結this，需要開發者手動繫結，否則this不能獲取當前元件例項物件。
react.component有三種手動繫結方法：可以在建構函式中完成繫結，也可以在呼叫時使用method.bind(this)來完成繫結，
還可以使用arrow function來繫結。拿上例的handleclick函式來說，其繫結可以有：
1 constructor(props)2
//使用bind來繫結
3 this.handleclick()}>
//使用arrow function來繫結
import react from 'react';
import reactdom from 'react-dom';
class ha extends react.component ;
}option(flag))
}else)}}
showlist()
render() );}
}export default ha;
3 解決onclick立即執行幾種的方法+原理
原始寫法：
onclick=
正確寫法：
onclick=//用箭頭函式定義乙個新函式，返回結果是個函式onclick=//利用了bind的特性，
不會立即呼叫，而是生成乙個新的函式，你想什麼時候調就什麼時候調例子：
function add(a, b)
var foo1 = add.bind(add, 5,3);
foo1(); //8
var foo1 = add.bind(add, 5,3);
foo1(); //8
問題點：
前者在宣告時就直接執行了（因而載入頁面自動執行），剛好在事件函式中也有setstate操作，這樣就會陷入到死迴圈中，不停的改變state,render（）又不停的被執行。執行後的返回值賦給了onclick屬性（返回值必然不會是個函式，因而再點選沒有作用）
解決方案：只是宣告阻止立即執行
4 react遍歷資料，生成列表的幾種方式（map，for ）
注意：一定要返回，&返回的一定是dom結構
var arr = ['aaa', 'bbb', 'cccc']
var lesson = ['json', 'pp', 'll']
function showlist(arr)
function a2(arr))
}return
}
第一天接觸react
很明顯的感覺到它與vue的相似之處，但目前我發現一點不同，vue在改變其data中的值後立馬就能查到值的改變，而react是在render後其值才改變。在我了解最基礎的部分後，想著實踐一下，於是出現了以下 其功能是類似 的功能。其中有一點值得注意。在react中使用行內樣式時，如transform的...
react學習第一天筆記
繫結屬性注意 class要變成classname for要換成htmlfor style要轉換成 我是紅色的div 行內樣式 其他的屬性和其他的寫法是一樣的 引入本地 import logo from assets images logo.jpg class news extends compone...
React基礎學習（第一天）
概述 特點 基於元件 學習一次,隨處使用 我們現在做的是web頁面 ios android殼子 前端 包管理器 工具 npm cnpm yarn npm 最火的 映象 cnpm 國內 demo ok 專案 cnpm 不要弄 yarn facebook 使用前必須安裝 yarn 的執行模組npm i ...