亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

react中如果需要操作state中的數據，不要直接修改，應該先復制一個副本，操作副本中的數據，之后再賦值給state。

原因：1.在使用一些工具調試時會比較方便；2.后期使用一些比較復雜的框架時，直接操作的錯誤寫法會導致代碼性能低下。

1.this指向；2.ES6的class類方法；3.react中改變數據時使用setState方法；4.數組的解構賦值

button監聽click時的方法，this指向為當前button，需要在方法調用后將其this使用bind綁定到當前方法。

改變state數據不可以用傳統方法直接賦值或push，需要用setState方法改變其值。

react中，大寫字母開頭的都是組件，如import App from '***'

定義一個React組件：class componentName extends React.Component {}

組件中必須要有一個render()函數來掛載組件顯示的dom

什么是組件： 可復用的代碼模塊，其實也就是可復用的代碼片段。

組件允許我們將應用的UI拆分成獨立的、可復用的模塊，其實也就是可復用的代碼片段。React應用程序就是由組件來構建的，也就是說React應用的基石！

只要是頁面上的一部分我們都可以把它理解成一個組件

組件就是網頁上的有部分

在react中以大寫字母開頭的都是組件

ReactDOM就是為了便于我們把組件掛載(渲染)到dom元素上

組件就是類

自定義的一個組件必須要繼承react的組件 即React.Component 才能變成react的一個組件

render負責的就是當前組件要顯示的內容

組件定義完成之后要導出出去，便于其他組件導入引用

export 和 import 是配對使用

筆記筆記筆記

使用樣式有兩種方法：

1. 使用style行內樣式
   JSX語法中，如果要加個行內樣式，必須要用{{}}包裹，最外層這個花括號表示他裡面是個 JSX表達式，而裡面的花括號表示這個表達式實際上是個JSX的對象。
   要用對象的形式進行編碼：<botton style={{ background: "green" , color: "#fff" }}>Add</button>

2. 使用class樣式類
   要用className這個關鍵詞，不能用class。
   因為在React中Class是關鍵詞，表示定義一個React的組件

組件最外層的div可以使用 React.Fragment元素代替，在渲染時不會顯示最外層標籤。

使用結構賦值，在應用React的時候，一並引用Component, Fragment

父子組件概念：父組件通過屬性的形式向子組件傳遞參數，子組件通過props的形式接受父組件傳過來的參數

儘量不要直接去改變state裡面的數據，而是生成一個副本去修改，然後重新對state賦值。

在ES6中，如果key、value同名，可以省略成this.setState({list});

當在input框輸入內容的時候，onChange事件會被執行。改變state裡面inputValue的值，inputValue只要一變，對應dom節點上的input的value值也會跟著變

當點擊button的時候，改變了state的list值同時改變inputValue的值，而inputValue只要一變，對應dom節點上的input的value值也一定會跟著變

render函數return出去的內容只能是一個大的JSX

constructor是組件被創出的一瞬間會俾自動執行

當TodoList組件剛被創建的時候，constructor會被自動執行，super(props)做一些初始化，創建一個state的數組對象

React裡面的state數據只能使用this.setState去改變

當數據發生變化的時候，React會重新自動去執行render函數，重新去渲染頁面，所以數據一變化，頁面就跟住變化。之前的編程是自己去操作dom，而在React裡面不在是操作dom，而是面向數據編程。

React要求我們，每一項的內容返回的時候，標籤上必須要有key值，key值是唯一的，不能重複

JSX語法，允許我們在React中直接去使用標籤結構的代碼結構，JSX裡面只能寫JS的表達式（用{}），不能寫JS語句。

React是一個基於組件開發的框架。

組件指的是網頁上的一部分，只要是頁面上的一部分，都可以理解為組件。如網頁整體上是一個大的組件，Logo可以拆分成一個小組件，搜索區也是一個組件（裡面還可以拆分成一個輸入框組件和一個按鈕組件）。

App就是最外層的一個組件，在React中，以大寫字母開頭的都是組件

index.js是一個入口文件：

引入了react庫，在於可以了解React的語法

引入了react-dom，在於讓組件可以掛載到頁面上一個document節點上，把一個組件渲染到dom上。

引入了App.js，App.js裡面的代碼一定是在定義一個React組件。它是一個類，必須要繼承在React庫裡面引入的一個Component的類。React一個組件裡面，必須有一個render函數，負責這個組件要顯示的內容。export default app將其導出。

React原理：

之所以頁面上能展示這個頁面，是因為項目裡面一定會有頁面相關的代碼，代碼放在src目錄下。

React執行的入口文件是src/index.js，是整個程序的入口

引入了：react, react-dom, App.js,?registerServiceWorker,?App.test.js

registerServiceWorker是一個pwa，也就是離線頁面的一個內容

.css是樣式文件

App.test.js是做自動化測試的時候會用到的一個文件

App.js裡面顯示了網頁div裡面的代碼