React入門 React父子元件傳值demo

公司一直是前後端分離的，最近集團開始推進中後台視覺化開發元件（基於react封裝），跟師兄聊起來也聽說最近對後台開發人員的前端能力也是越來越重視了。所以作為一名後端，了解下前端的框架對自己也是大有好處的！

首先，博主由於在小公司做過，有一定的前端基礎，但是學習react框架的時候還是遇到了一些阻力。因為前端框架的一些思想是和後端完全不同的，特別是react這個面向元件的動態語言框架，用起來非常靈活。

順便說點閒話，乙個優秀的前端待遇會比同級別後端還要高一些，因為一名優秀的前端不僅要不停的學習不斷更迭的新技術外、也要能夠熟練地在和運營、測試以及產品撕逼中處理問題。還記得在前後端分離前，撕逼這件事一直是後端同學來面對的。分離後、後端同學只要做一名默默無聞的螺絲釘就可以了。

好了開始正題，首先，官網祭天！

官網：offical website：

特點：宣告式：只需要改變資料來源的資料，就能實現頁面資料元素的更新。

元件化：差分成多個可復用的元件，組裝自己的頁面。

虛擬dom（物件對應dom元素），不是總是更新dom。

根據演算法，最小重繪頁面，減少更新的區域。

傳值demo：

1、主頁面，引用了乙個自定義元件》todolist：

render()

2、看一下自定義元件中的**：

import react,  from 'react';
export default class todolist extends component ;
}  render() 
//當input元件中值變動後更新為新的值
valuechange(e) );
}  //按鈕點選事件-新增值
butclick() );
}  //點選事件-刪除值
deleteli(index));
}}

3、顯示效果，上面的**實現了todolist的增刪改查功能：

5、此時涉及到元件傳值的問題，這裡要注意，react中，所有傳值都是自上而下的：

抽取出的item元件：

mport react,  from 'react';
export default class item extends component ;
}  render() 
}  clickchild()
}

6、相應的中層元件，注意元件的傳值方式：

index=

deleteli=

import react,  from 'react';
import item from './item';
export default class todolistnewa extends component ;
}  render() 
valuechange(e) );
} //按鈕點選事件-新增值
butclick() );
}  //點選事件-刪除值
deleteli(index) );
}}

React入門 React父子元件傳值demo

react 父子傳值 react

react父子通訊

react父子元件通訊

React入門 React父子元件傳值demo

react 父子傳值 react

react父子通訊

react父子元件通訊

相關推薦