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

布满荆棘的人生 2022-04-08 11:17 210阅读 0赞

*  第Ⅰ部分 React基础
 *  第3章 JSX
 *  3.4 React和JSX陷阱
 *  3.4.3 style属性

style属性命名必须使用小驼峰风格。例如：

background-color变成backgroundColor

*  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;

一个稍微复杂的时钟，随着时间的移动，转盘内的时分秒都在移动，下方的时间也在每秒变化一次

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

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][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][https_react.semantic-ui.com_collections_menu_types-basic]

Router:[https://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html][https_react-guide.github.io_react-router-cn_docs_guides_basics_RouteConfiguration.html]

map:[https://reactjs.org/docs/lists-and-keys.html][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][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][https_blog.csdn.net_qq_37815596_article_details_85003733]

第14章 使用Redux处理数据

通过链接查看：[https://blog.csdn.net/qq\_37815596/article/details/84104448][https_blog.csdn.net_qq_37815596_article_details_84104448]

第15章 使用GraphQL处理数据

学习网址：[http://graphql.cn/learn/][http_graphql.cn_learn]

[https://aws-amplify.github.io/docs/js/api][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][https_blog.csdn.net_qq_37815596_article_details_85044734]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220405/1ee32d0b02e1427091b6017e9f86a3dd.png
[https_blog.csdn.net_qq_37815596_article_details_84971434]: https://blog.csdn.net/qq_37815596/article/details/84971434
[https_react.semantic-ui.com_collections_menu_types-basic]: https://react.semantic-ui.com/collections/menu/#types-basic
[https_react-guide.github.io_react-router-cn_docs_guides_basics_RouteConfiguration.html]: https://react-guide.github.io/react-router-cn/docs/guides/basics/RouteConfiguration.html
[https_reactjs.org_docs_lists-and-keys.html]: https://reactjs.org/docs/lists-and-keys.html
[https_blog.csdn.net_qq_37815596_article_details_85006053]: https://blog.csdn.net/qq_37815596/article/details/85006053
[https_blog.csdn.net_qq_37815596_article_details_85003733]: https://blog.csdn.net/qq_37815596/article/details/85003733
[https_blog.csdn.net_qq_37815596_article_details_84104448]: https://blog.csdn.net/qq_37815596/article/details/84104448
[http_graphql.cn_learn]: http://graphql.cn/learn/
[https_aws-amplify.github.io_docs_js_api]: https://aws-amplify.github.io/docs/js/api
[https_blog.csdn.net_qq_37815596_article_details_85044734]: https://blog.csdn.net/qq_37815596/article/details/85044734