《快速上手React编程》学习心得_综合

第Ⅰ部分 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.checkedthis.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.checkedthis.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.checkedthis.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.checkedthis.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] = valuethis.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

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.statereturn (<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 App

Router

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处理数据

学习网址：http://graphql.cn/learn/

https://aws-amplify.github.io/docs/js/api

第17章在Node中使用React和同构JavaScript

"同构"意味着在服务器和客户端都使用相同的代码（通常用javascript编写）。

其他的等用到的时候再做深入学习，目前只是了解

第18章使用React Router创建一个网上书店

安装bootstarp

npm install bootstrap@3 --save

然后引入

import 'bootstrap/dist/css/bootstrap.css'

Redux学习请查看链接https://blog.csdn.net/qq_37815596/article/details/85044734