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

最新推荐文章于 2024-08-12 01:27:57 发布

热爱前端的小君同学

最新推荐文章于 2024-08-12 01:27:57 发布

阅读量2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_37815596/article/details/84989649

版权

前端专栏收录该内容

105 篇文章 4 订阅

订阅专栏

第Ⅰ部分 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

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

学习网址：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

热爱前端的小君同学

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录