-
第一步： 安装 node
(Reactjs官网：https://reactjs.org/)
第二步 ：利用脚手架 创建项目 npx create-react-app todolist
第三步：进入 todolist 文件后 运行项目 npm start
查看全部 -
React Filber是對應React16之後的版本對應的React框架，對底層的核心算法進行改良，引入了一些優先級的的概念、分片的概念，使React的代碼更加流暢，尤其是處理一些複雜的動畫的時候
查看全部 -
老师讲的很清晰，听完基本都很好理解，查看全文有图?查看全部 -
結構賦值
import React, { Componentm Fragment } from 'react';
React.Component => Component
React.Fragment => Fragment查看全部 -
組件最外層的div可以使用 React.Fragment元素代替，在渲染時不會顯示最外層標籤。
查看全部 -
引入樣式
import './style.css';查看全部 -
class方式添加樣式
class='red-btn' 沒有報錯，但有警告
在 React 中 class這個關鍵詞表示在定義一個 React 組件，所以不建議你在樣式中使用 class 這個名字，而是使用 className。查看全部 -
寫成 style='backgroud:red' 會報錯
JSX語法中，如果要加個行內樣式，必須要用{{}}包裹，最外層這個花括號表示他裡面是個 JSX表達式，而裡面的花括號表示這個表達式實際上是個JSX的對象。
要寫成(對象的方式來編碼)：style={{backgroud:'red'}}查看全部 -
渲染 li 列表的部分可以單獨拆分成一個函式來編寫。
getTodoItems()查看全部 -
handleDelete(){ this.props.delete(this.props.index); }ES6的結構賦值
handleDelete(){ }但 delete因為是個 reserved word，所以頁面會報錯，所以先不改了
查看全部 -
render(){ return( <div onClick={this.handleDelete}>{this.props.content}></div> ) }可以使用 ES6的結構賦值
render(){ return( <div onClick={this.handleDelete}>></div> ) }查看全部 -
把代碼寫漂亮一點，把 return 加個括號
查看全部 -
程式中有很多地方使用 .bind(this)
例如:
<input onChange={this.handleInputChange.bind(this)}
實際上這麼寫 React 代碼的性能會稍微有些影響，所以不建議。
我們可以在 constructor 裡面寫
this.handleInputChange = this.handleInputChange.bind(this);
事先就做好 this 指向的改變
因此就在原本的寫法就沒必要再寫 .bind(this)
<input onChange={this.handleInputChange}查看全部 -
handleDelete(index) 方法
查看全部 -
子組件使用父組件傳遞過來的方法
this.props.delete(this.props.index);查看全部
举报