- 第Ⅰ部分 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 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处理数据
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