《快速上手React程式設計》學習心得（正在逐步更新中）
阿新 • • 發佈：2018-12-17
- 第Ⅰ部分 React基礎
- 第3章 JSX
- 3.4 React和JSX陷阱
- 3.4.3 style屬性
style屬性命名必須使用小駝峰風格。例如：
background-color變成backgroundColor
<input style = {{fontSize:'30pt'}} />- 3.4.4 class和for
React中用className代替class，用htmlFor代替for
- 3.4.5 布林型別的屬性值
一共有6個假值(false,0,''空字串,null,未定義,NaN)
字串"false"是真值
- 第4章 與狀態互動
- 4.2.3更新狀態
使用狀態實現時鐘
import React, { Component } from 'react'; import './App.css'; class App extends Component { constructor(props) { super(props); this.state = { currentTime : (new Date().toLocaleString()) }; } //建立定時器 componentDidMount(){ this.timerID = setInterval( ()=>this.tick(), 1000 ) } // 在 componentWillUnmount()生命週期鉤子中解除安裝計時器 componentWillUnmount(){ clearInterval(this.timerID) } tick(){ this.setState({ currentTime : (new Date().toLocaleString()) }) } render() { return ( <div className="App"> <div>{this.state.currentTime}</div> </div> ); } } export default App;
一個稍微複雜的時鐘，隨著時間的移動，轉盤內的時分秒都在移動，下方的時間也在每秒變化一次
import React, { Component } from 'react'; import './App.css'; class App extends Component { constructor(props) { super(props); this.state = { date: (new Date()) }; } // 建立定時器 componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ) } // 在 componentWillUnmount()生命週期鉤子中解除安裝計時器 componentWillUnmount() { clearInterval(this.timerID) } tick() { this.setState({ date: (new Date()) }) } render() {console.log(this.state.date.getSeconds()) //設定時鐘圓盤的樣式 let dialStyle = { position: 'relative', top: 0, left: 0, width: 200, height: 200, borderRadius: '50%', borderStyle: 'solid', borderColor: 'black', margin: '0 auto' } //設定分的樣式 let secondHandStyle = { position: 'relative', top: 100, left: 100, border: '1px solid red', width: '40%', height: 1, transform: 'rotate(' + ((this.state.date.getSeconds() / 60) * 360 - 90).toString() + 'deg)', transformOrigin: '0% 0%', borderColor: 'red' } let minuteHandStyle = { position: 'relative', top: 100, left: 100, border: '1px solid grey', width: '40%', height: 3, transform: 'rotate(' + ((this.state.date.getMinutes() / 60) * 360 - 90).toString() + 'deg)', transformOrigin: '0% 0%', borderColor: 'grey' } let hourHandStyle = { position: 'relative', top: 92, left: 106, border: '1px solid grey', width: '20%', height: 7, transform: 'rotate(' + ((this.state.date.getHours() / 12) * 360 - 90).toString() + 'deg)', transformOrigin: '0% 0%', borderColor: 'grey' } return ( <div className="App"> <div style={dialStyle} > <div style={secondHandStyle} /> <div style={minuteHandStyle} /> <div style={hourHandStyle} /> </div> <div>{this.state.date.toLocaleString()}</div> </div> ); } } export default App;
- 第5章 React 元件生命週期
元件的生命週期可分成三個狀態：
- Mounting：已插入真實 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真實 DOM
生命週期的方法有：
-
componentWillMount 在渲染前呼叫,在客戶端也在服務端。（僅呼叫一次）
-
componentDidMount : 在第一次渲染後呼叫，只在客戶端。之後元件已經生成了對應的DOM結構，可以通過this.getDOMNode()來進行訪問。 如果你想和其他JavaScript框架一起使用，可以在這個方法中呼叫setTimeout, setInterval或者傳送AJAX請求等操作(防止非同步操作阻塞UI)。
-
componentWillReceiveProps 在元件接收到一個新的 prop (更新後)時被呼叫。這個方法在初始化render時不會被呼叫。
-
shouldComponentUpdate 返回一個布林值。在元件接收到新的props或者state時被呼叫。在初始化時或者使用forceUpdate時不被呼叫。
可以在你確認不需要更新元件時使用。 -
componentWillUpdate在元件接收到新的props或者state但還沒有render時被呼叫。在初始化時不會被呼叫。
-
componentDidUpdate 在元件完成更新後立即呼叫。在初始化時不會被呼叫。
-
componentWillUnmount在元件從 DOM 中移除之前立刻被呼叫。
- 第6章 React 事件處理
不應該使用bind(this):
- 不需要通過this來引用類的例項時
- 使用舊的風格React.createClass()
- 使用箭頭函式(()=>{})
- 第7章 在React中使用表單
onChange等事件中，可以讀到以下具有互動能力的屬性/欄位
- value：適用於<input>、<textarea>和<select>
- checked:適用於<input>中的type="checkbox"和type="radio"
- selected:適用於<option>(與<select>一起使用)
<input>元素
根據type屬性的值渲染出不同的欄位:
- text 純文字輸入欄位
- password 帶有遮蔽顯示功能的文字輸入欄位（用於隱私）
- radio 單選按鈕。使用相同的名稱建立一組單選按鈕
- checkbox 複選框。使用相同的名稱建立一組複選框
- button 按鈕表單元素
渲染單選按鈕並處理更改
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props){
super(props)
this.handleRadio=this.handleRadio.bind(this)
this.state={
radioGroup:{
state1:false,
state2:true,
state3:false
}
}
}
handleRadio(event){
let obj={}
obj[event.target.value]=event.target.checked
this.setState({radioGroup:obj})
console.log('this.state.radioGroup',this.state.radioGroup)
}
render() {
return (
<div className="App">
<input type="radio" name="radioGroup" value="state1" checked={this.state.radioGroup['state1']} onChange={this.handleRadio} />
<input type="radio" name="radioGroup" value="state2" checked={this.state.radioGroup['state2']} onChange={this.handleRadio} />
<input type="radio" name="radioGroup" value="state3" checked={this.state.radioGroup['state3']} onChange={this.handleRadio} />
</div>
);
}
}
export default App;
渲染複選框並處理更改
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props){
super(props)
this.handleCheck=this.handleCheck.bind(this)
this.state={
checkboxGroup:{
state1:false,
state2:true,
state3:false
}
}
}
handleCheck(event){
let obj= Object.assign(this.state.checkboxGroup)
obj[event.target.value]=event.target.checked
this.setState({checkboxGroup:obj})
console.log('this.state.radioGroup',this.state.checkboxGroup)
}
render() {
return (
<div className="App">
<input type="checkbox" name="checkboxGroup" value="state1" checked={this.state.checkboxGroup['state1']} onChange={this.handleCheck} />
<input type="checkbox" name="checkboxGroup" value="state2" checked={this.state.checkboxGroup['state2']} onChange={this.handleCheck} />
<input type="checkbox" name="checkboxGroup" value="state3" checked={this.state.checkboxGroup['state3']} onChange={this.handleCheck} />
</div>
);
}
}
export default App;
checkbox 和 radio使用checked，其他input元素使用value作為元素的可變屬性
input，textarea,checkbox 和 radio資料監聽
具體使用方法檢視：https://blog.csdn.net/qq_37815596/article/details/84971434
import React, { Component } from 'react';
import { Form, Input, Dropdown, Button, Icon} from 'semantic-ui-react'
import './App.css';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
const footOptions = [
{ key: 'left', text: 'left', value: 'left' },
{ key: 'right', text: 'right', value: 'right' }
]
class App extends Component {
constructor(props) {
super(props);
this.handleChangeDate = this.handleChangeDate.bind(this);
this.handleSelectChange=this.handleSelectChange.bind(this);
this.handleRadio=this.handleRadio.bind(this);
this.handleCheck=this.handleCheck.bind(this);
this.state = {
inputTerm: [],
startDate: new Date(),
open: false,
selectedValue: 'option1',
radioGroup:{
state1:false,
state2:false,
state3:false
},
checkboxGroup:{
state1:false,
state2:true,
state3:false
}
}
}
handleCheck(event){
let obj = Object.assign(this.state.checkboxGroup)
obj[event.target.value]=event.target.checked
this.setState({checkboxGroup:obj})
console.log('this.state.checkboxGroup',this.state.checkboxGroup)
}
handleRadio(event){
let obj = Object.assign(this.state.radioGroup)
obj[event.target.value]=event.target.checked
this.setState({radioGroup:obj})
console.log('this.state.radioGroup',this.state.radioGroup)
}
handleSelectChange(event){
this.setState({selectedValue:event.target.value})
console.log('selectedValue',this.state.selectedValue)
}
handleChangeDate(date) {
this.setState({
startDate: date
});
console.log('startDate', this.state.startDate)
}
handleInputChange(Input, value) {
let inputTerm = Object.assign([], this.state.inputTerm)
inputTerm[Input] = value
this.setState({ inputTerm: inputTerm })
console.log('inputTerm', this.state.inputTerm)
}
render() {
return (
<div className="App">
<Form>
<div>新增input框,Dropdown,日曆輸入的值</div>
<Input placeholder='text1' onChange={(e, data) => { this.handleInputChange('text1', e.target.value) }} />
<Input placeholder='text2' onChange={(e, data) => { this.handleInputChange('text2', e.target.value) }} />
<textarea placeholder='text3' onChange={(e, data) => { this.handleInputChange('text3', e.target.value) }} />
<Dropdown placeholder='Select Foot' selection options={footOptions} onChange={(e, data) => { this.handleInputChange('foot', data.value); }} />
<select value={this.state.selectedValue} onChange={this.handleSelectChange}>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<DatePicker selected={this.state.startDate} onChange={this.handleChangeDate} />
<input type="radio" name="radioGroup" value="state1" checked={this.state.radioGroup['state1']} onChange={this.handleRadio} />
<input type="radio" name="radioGroup" value="state2" checked={this.state.radioGroup['state2']} onChange={this.handleRadio} />
<input type="radio" name="radioGroup" value="state3" checked={this.state.radioGroup['state3']} onChange={this.handleRadio} />
<input type="checkbox" name="checkboxGroup" value="state1" checked={this.state.checkboxGroup['state1']} onChange={this.handleCheck} />
<input type="checkbox" name="checkboxGroup" value="state2" checked={this.state.checkboxGroup['state2']} onChange={this.handleCheck} />
<input type="checkbox" name="checkboxGroup" value="state3" checked={this.state.checkboxGroup['state3']} onChange={this.handleCheck} />
</Form>
</div>
);
}
}
export default App- 第8章 擴充套件React 元件
PropTypes的使用方法如下：PropTypes只能用來設定接收的屬性的型別並驗證，並不能實現對input元素進行輸入框內容的型別限制
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};- 第9章 專案:選單元件
Menu和Link元件看書上看的雲裡霧裡的，
參考學習連結
Menu:https://react.semantic-ui.com/collections/menu/#types-basic
Router:https://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html
map:https://reactjs.org/docs/lists-and-keys.html
Menu
import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'
import 'semantic-ui-css/semantic.min.css';
class App extends Component {
state = {
activeItem:'Home'
}
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
render() {
const { activeItem } = this.state
return (
<Menu>
<Menu.Item name='Home' active={activeItem === 'Home'} onClick={this.handleItemClick} >
Home
</Menu.Item>
<Menu.Item name='About' active={activeItem === 'About'} onClick={this.handleItemClick}>
About
</Menu.Item>
<Menu.Item name='Contact' active={activeItem === 'Contact'} onClick={this.handleItemClick} >
Contact
</Menu.Item>
</Menu>
)
}
}
export default AppRouter
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import Home from './home/Home';
import About from './about/About';
import '../styles/App.css';
class App extends Component {
render() {
return (
<Router>
<div>
<ul>
<li><Link to='/'>首頁</Link></li>
<li><Link to='/about'>關於</Link></li>
</ul>
<hr/>
<Route exact path="/" component={About} />
<Route path="/about" component={Home} />
</div>
</Router>
);
}
}
export default App;- 第10章 專案：Tooltip元件
具體怎樣實現tooltip和toggle按鈕，請檢視https://blog.csdn.net/qq_37815596/article/details/85006053，程式碼齊全，看完就會
- 第11章 專案： Timer元件
參考4.2.3，不想用本書提供的元件，過於繁瑣
- 第Ⅱ部分 ：React架構
第12章 Webpack構建工具
第13章 Reac路由
通過連結檢視：https://blog.csdn.net/qq_37815596/article/details/85003733
第14章 使用Redux處理資料
通過連結檢視：https://blog.csdn.net/qq_37815596/article/details/84104448
第15章 使用GraphQL處理資料
https://aws-amplify.github.io/docs/js/api
第17章 在Node中使用React和同構JavaScript
"同構"意味著在伺服器和客戶端都使用相同的程式碼（通常用javascript編寫）。
其他的等用到的時候再做深入學習，目前只是瞭解
第18章 使用React Router建立一個網上書店
安裝bootstarp
npm install [email protected] --save然後引入
import 'bootstrap/dist/css/bootstrap.css'Redux學習請檢視連結https://blog.csdn.net/qq_37815596/article/details/85044734