linux cpu占用率如何看
234
2022-09-03
1801A React
一、初识React
课程目标
React简介脚手架hello worldJSX语法
知识点
1.React简介
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站(React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。
官方网站:16.13.1
github star数:149k (vue是164k)
npm下载量对比:从5.2版开始,增加了 npx 命令。
npx 还能避免全局安装的模块。
npx 将create-react-app下载到一个临时目录,使用以后再删除。所以,以后再次执行上面的命令,会重新下载create-react-app。
每次使用的都是最新版本,脚手架使用的频率并不高,一个大项目使用一次就够了。
npx create-react-app my-appcd my-appnpm start
3.hello world
类组件:
import React, { Component } from 'react'export default class Home extends Component { render() { return (
函数组件:
import React from 'react'const Home = () => { return (
4.JSX语法
React发明了JSX,利用HTML语法来创建虚拟DOM。
React的核心机制之一就是可以在内存中创建虚拟的DOM元素。以此来减少对实际DOM的操作从而提升性能。
JSX 即Javascript XML,它是对JavaScript 语法扩展。
我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。
在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代。
HTML 语言直接写在 JavaScript 语言之中,这就是 JSX(JavaScript and XML) 的语法。JSX,是一种 JavaScript 的语法扩展,它允许 HTML 与 JavaScript 的混写。JSX是facebook为React框架开发的一套语法糖,语法糖又叫做糖衣语法,是指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用,它主要的目的是增加程序的可读性,从而减少程序代码错处的机会。JSX就是JS的一种语法糖,类似的还有CoffeeScript、TypeScript,最终它们都会被解析成JS才能被浏览器理解和执行,如果不解析浏览器是没有办法识别它们的,这也是所有语法糖略有不足的地方。
const element =
你可以任意地在 JSX 当中使用 JavaScript 表达式,在 JSX 当中的表达式要包含在大括号里。例子如下:
const names = ['Jack', 'Tom', 'Alice'];const element = (
在书写 JSX 的时候一般都会带上换行和缩进,这样可以增强代码的可读性。与此同时,推荐在 JSX 代码的外面扩上一个小括号,这样可以防止分号自动插入的bug。
授课思路
案例作业
1.阅读官网 2.使用脚手架创建项目 3.编写hello world页面 4.预习加加减减
二、加加减减
课程目标
VSCode插件添加样式加加减减JSX语法
知识点
1.VSCode插件
ES7 React/Redux/GraphQL/React-Native snippets
快捷方式: 创建类组件: rcc 创建函数数据:raface
2.添加样式
使用className,而不是class
import React from 'react'const Home = () => { return (
想使用sass同学可以安装node-sass
yarn add node-sass
把样式文件改成scss就行了
.m-title{ color: red; .m-name{ color: lightblue; }}
3.加加减减
constructor构造函数在组件创建时执行,super代表调用父类的构造函数,Component就是父类。
state是状态的意思,类似于vue的里的data。
修改state使用setState方法。
onClick是React合成事件。
import React, { Component } from 'react'export default class Home extends Component { constructor(props) { super(props) this.state = { count: 0 } } handleSub() { let { count } = this.state count-- this.setState({ count }) } handleAdd() { let { count } = this.state count++ this.setState({ count }) } render() { let { count } = this.state return (
4.事件系统
React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同:
React 事件的命名采用小驼峰式(camelCase),而不是纯小写。 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
不会存在IE浏览器兼容性的问题。
在React底层,主要对合成事件做了两件事情:事件委派和自动绑定。
事件委派
React中并不是把事件处理函数绑定到当前DOM上,而是把所有的事件绑定到结构的最外层,使用统一的事件监听器。 这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。 组件挂载和卸载时,只是在统一事件监听器上插入删除一些对象。
自动绑定
在React组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前的组件。而且React会对这种引用缓存,以达到CPU和内存的最大优化。
授课思路
案例作业
1.上网阅读相关质料 2.制作加加减减 3.添加样式 4.预习列表渲染
三、列表渲染
课程目标
map方法列表渲染key学习资料
知识点
1.map方法
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
let arr = [1, 2, 3] let arr2 = arr.map(item => item * 2) console.log(arr2)
2.列表渲染
在state里定义一个数组,包含id 把数组里的字段渲染到页面上 类似于vue里的v-for
import React, { Component } from 'react'export default class Home extends Component { constructor(props) { super(props) this.state = { list: [ { id: 0, title: '武侠' }, { id: 1, title: '都市' }, { id: 2, title: '科幻' } ] } } render() { let { list } = this.state let listDom = list.map(item => (
3.key
key 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。 一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常,我们使用数据中的 id 来作为元素的 key。
这个 key 必须是每个元素唯一的标识。key可以在DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化,提高渲染性能。所以需要给数组每一个元素增加一个唯一的标识。 一般可以将后台返回的ID作为key值,因为后台返回的ID都是唯一的。
4.学习资料
官网列表渲染: 2.列表渲染 3.预习条件渲染
四、条件渲染
课程目标
条件渲染dom条件渲染样式key学习资料
知识点
1.条件渲染dom
dom的显示和隐藏:hello world!的显示与隐藏。 文案的切换:按钮文案的变化。 属性的切换:控制密码的显示隐藏。 在vue里使用v-if v-show。
import React, { Component } from 'react'export default class Home extends Component { constructor(props) { super(props) this.state = { visible: false } } handleVisible() { let { visible } = this.state this.setState({ visible: !visible }) } render() { let { visible } = this.state return (
2.条件渲染样式
根据状态控制样式:tab切换的高亮显示。
import React, { Component } from 'react'export default class Home extends Component { constructor(props) { super(props) this.state = { list: [ { id: 0, title: '武侠' }, { id: 1, title: '都市' }, { id: 2, title: '科幻' } ], currentId: 0 } } handleNav(currentId) { this.setState({ currentId }) } render() { let { list, currentId } = this.state let listDom = list.map(item => (
.m-nav-item{height: 40px;line-height: 40px;border-bottom: 1px solid #ddd;text-align: center;}.m-nav-item.active{background: lightblue;}
3.对话框
控制dom的显示和隐藏:dialog对话框。
div水平垂直居中。
import React, { Component } from 'react'export default class Home extends Component { constructor(props) { super(props) this.state = { visible: false } } handleVisible() { let { visible } = this.state this.setState({ visible: !visible }) } handleClose() { this.setState({ visible: false }) } render() { let { visible } = this.state return (
.m-dialog-wrap{display: flex; position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);}.m-dialog{margin: auto;min-width: 300px;min-height: 240px;background: #fff;border-radius: 10px;}.m-dialog-header{display: flex;height: 40px;line-height: 40px;border-bottom: 1px solid #ddd;}.m-dialog-title{flex: 1;padding: 0 0 0 10px;}.m-dialog-close{width: 40px;text-align: center;cursor: pointer;}
4.学习资料
官网条件渲染: 2.制作对话框 3.预习受控组件
五、受控组件
课程目标
什么是受控组件文本框受控组件如何获取受控组件的值学习资料
知识点
1.什么是受控组件
在 HTML 中,表单元素(如、
我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
假设我们现在有一个表单,表单中有一个input标签,input的value值必须是我们设置在constructor构造函数的state中的值,然后,通过onChange触发事件来改变state中保存的value值,这样形成一个循环的回路影响。也可以说是React负责渲染表单的组件仍然控制用户后续输入时所发生的变化。
就像上面这样,input中的value值通过state值获取,onChange事件改变state中的value值,input中的value值又从state中获取。。。
类似于vue中的v-model
2.文本框受控组件
input框的值来至state,onChange事件修改state。
import React, { Component } from 'react'export default class Home extends Component { constructor(props) { super(props) this.state = { username: '' } } handleUsername(e) { this.setState({ username: e.target.value }) } render() { let { username } = this.state return (
3.如何获取受控组件的值
从state里解构。
import React, { Component } from 'react'export default class Home extends Component { constructor(props) { super(props) this.state = { username: '', password: '' } } handleUsername(e) { this.setState({ username: e.target.value }) } handlePasswrod(e) { this.setState({ password: e.target.value }) } handleLogin() { let { username, password } = this.state console.log(username, password) } render() { let { username, password } = this.state return (
4.学习资料
官网受控组件: 2.制作对话框 3.预习受控组件
六、组件
课程目标
组件化思想编写第一个组件组件间的通讯iconfont
知识点
1.组件化思想
组件化就是把传统的一张大网页拆分成很多小组件,有些组件可以反复使用,有些组件也许只使用一次,拆分成很多组件的目的就是使页面解构更清晰更好维护,也方便多人协作开发一个大项目。
对比vue的单文件组件。
组件作为React的核心内容,是View的重要组成部分,每一个View页面都由一个或多个组件构成,可以说组件是React应用程序的基石。在React的组件构成中,按照状态来分可以分为有状态组件和无状态组件。 所谓无状态组件,就是没有状态控制的组件,只做纯静态展示的作用,无状态组件是最基本的组件形式,它由属性props和渲染函数render构成。由于不涉及到状态的更新,所以这种组件的复用性也最强。 有状态组件是在无状态组件的基础上增加了组件内部状态管理,有状态组件通常会带有生命周期lifecycle,用以在不同的时刻触发状态的更新,有状态组件被大量用在业务逻辑开发中。
2.编写第一个组件
创建components文件夹。 创建Icon.js文件。自定义组件的首字母大写,组件文件首字母也大写。
components/Icon.js:
import React, { Component } from 'react'export default class Icon extends Component { render() { return ( 子组件 ) }}
父组件引入子组件,并在JSX里使用子组件。
import React, { Component } from 'react'import Icon from './components/Icon'export default class Home extends Component { render() { return (
3.组件间的通讯
父组件向子组件传递属性和方法。 子组件使用父组件传递过来的属性。 子组件调用父组件传递过来的方法。
父组件:
import React, { Component } from 'react'import Icon from './components/Icon'export default class Home extends Component { constructor(props) { super(props) this.state = { visible: true } } handleVisible() { const { visible } = this.state this.setState({ visible: !visible }) } render() { const { visible } = this.state return (
子组件:
import React, { Component } from 'react'export default class Icon extends Component { render() { let { name = 'zhanwei', className = '', onClick = () => {} } = this.props return ( ) }}
4.iconfont
阿里巴巴矢量图标库: 2.编写控制密码显示隐藏的Icon组件 3.预习props类型检查
七、prop类型检查
课程目标
类型检查的意义Icon组件类型检查常用的类型检查学习资料
知识点
1.类型检查的意义
随着你的应用程序不断增长,你可以通过类型检查捕获大量错误。 React 内置了一些类型检查的功能。要在组件的 props 上进行类型检查,你只需配置特定的 propTypes 属性。 PropTypes 提供一系列验证器,可用于确保组件接收到的数据类型是有效的。 传入的 prop 值类型不正确时,JavaScript 控制台将会显示警告。 出于性能方面的考虑,propTypes 仅在开发模式下进行检查。
2.Icon组件类型检查
对prop做必要的类型检查。
components/Icon.js:
import React, { Component } from 'react'import PropTypes from 'prop-types'export default class Icon extends Component { render() { let { name = 'zhanwei', className = '', onClick = () => {} } = this.props return ( ) }}Icon.propTypes = { name: PropTypes.string.isRequired, //name必须传string类型,且必须传 className: PropTypes.string, //className必须是string类型,可以不传 onClick: PropTypes.func, //onClick必须是函数类型}
父组件:
import React, { Component } from 'react'import Icon from './components/Icon'export default class Home extends Component { constructor(props) { super(props) this.state = { visible: true } } handleVisible() { const { visible } = this.state this.setState({ visible: !visible }) } render() { const { visible } = this.state return (
3.常用的类型检查
: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, children: PropTypes.element,
4.学习资料
使用 PropTypes 进行类型检查: 2.给Icon组件添加类型检查 3.预习生命周期
八、生命周期
课程目标
什么是生命周期挂载相关的生命周期更新相关的生命周期shouldComponentUpdate
知识点
1.什么是生命周期
生命周期函数(钩子函数)通俗的说就是在某一时刻会被自动调用执行的函数。
生命周期(life cycle)的概念广泛运用于各行各业。从广义上来说,生命周期泛指自然界和 人类社会中各种客观事物的阶段性变化及其规律。自然界的生命周期,可分为出生、成长、成熟、 衰退直到死亡。
React 组件的生命周期根据广义定义描述,可以分为挂载、渲染和卸载这几个阶段。当渲染 后的组件需要更新时,我们会重新去渲染组件,直至卸载。 因此,我们可以把 React 生命周期分成两类: 1)当组件在挂载或卸载时; 2)当组件接收新的数据时,即组件更新时。
2.挂载相关的生命周期
componentWillMount,componentDidMount, render,componentWillUnmount
components/Icon.js:
import React, { Component } from 'react'export default class Icon extends Component { componentWillUnmount() { console.log('卸载前') } render() { return (
父组件:
import React, { Component } from 'react'import Icon from './components/Icon'export default class Home extends Component { constructor(props) { super(props) this.state = { visible: true } } handleVisible() { let { visible } = this.state this.setState({ visible: !visible }) } componentWillMount() { console.log('挂载前(已经废弃)') } componentDidMount() { console.log('挂载后') } render() { console.log('渲染') let { visible } = this.state return (
3.更新相关的生命周期
componentWillUpdate、componentDidUpdate
父组件:
import React, { Component } from 'react'import Icon from './components/Icon'export default class Home extends Component { constructor(props) { super(props) this.state = { count: 0 } } handleAdd() { let { count } = this.state this.setState({ count: count + 1 }) } componentWillUpdate() { console.log('父组件更新前(已废弃)') } componentDidUpdate() { console.log('父组件更新后') } render() { console.log('渲染父组件') let { count } = this.state return (
子组件:
import React, { Component } from 'react'export default class Icon extends Component { componentWillUpdate() { console.log('子组件更新前(已废弃)') } componentDidUpdate() { console.log('子组件更新后') } render() { console.log('渲染子组件') return (
4.shouldComponentUpdate
用于性能优化,shouldComponentUpdate返回true则更新,返回false则不更新! 人为决定是否更新,避免了不必要的更新,从而优化了性能!
父组件:
import React, { Component } from 'react'import Icon from './components/Icon'export default class Home extends Component { constructor(props) { super(props) this.state = { count: 0, visible: true } } handleAdd() { let { count } = this.state this.setState({ count: count + 1 }) } handleVisible() { this.setState({ visible: !this.state.visible }) } render() { console.log('渲染父组件') let { count, visible } = this.state return (
子组件:
import React, { Component } from 'react'export default class Icon extends Component { shouldComponentUpdate(nextProps, nextState) { if (this.props.visible !== nextProps.visible) { return true } else { return false } } render() { let { visible } = this.props console.log('渲染子组件') return (
授课思路
案例作业
1.上网阅读相关质料 2.练习挂载相关的生命周期 3.预习tab切换
九、tab切换
课程目标
展开项目,写接口在挂载完生命周期里请求数据开发子组件开发父组件
知识点
1.展开项目,写接口
运行下面的命令可以展开项目,如何展开后报错,可以把node_modules删了重新装包
yarn eject
devServer里写接口:
//列表接口app.get('/api/list', (req, res) => { res.send({ code: 200, data: bookMallData, message: '列表' })})
2.在挂载完生命周期里请求数据
axios语法。 生命周期。
import React, { Component } from 'react'import axios from 'axios'export default class Home extends Component { constructor(props) { super(props) this.state = { list: [], currentId: 0, currentList: [] } } componentDidMount() { axios({ url: '/api/list' }).then(res => { if (res.data.code === 200) { this.setState({ list: res.data.data, currentList: res.data.data[0].list }) } }) } render() { return (
3.开发子组件
Sidebar.js:
import React, { Component } from 'react'export default class Sidebar extends Component { render() { let { list, currentId } = this.props let listDom = list.map(item => (
List.js:
import React, { Component } from 'react'export default class List extends Component { render() { let { currentList } = this.props let currentListDom = currentList.map(item => (
4.开发父组件
父组件:
import React, { Component } from 'react'import axios from 'axios'import Sidebar from './components/Sidebar'import List from './components/List'export default class Home extends Component { constructor(props) { super(props) this.state = { list: [], currentId: 0, currentList: [] } } handleNav(currentId) { let { list } = this.state let currentList = list.find(item => item.id === currentId).list this.setState({ currentId, currentList }) } componentDidMount() { axios({ url: '/api/list' }).then(res => { if (res.data.code === 200) { this.setState({ list: res.data.data, currentList: res.data.data[0].list }) } }) } render() { let { list, currentId, currentList } = this.state return (
授课思路
案例作业
1.上网阅读相关质料 2.练习tab切换 3.预习todolist
十、todolist
课程目标
todolist是什么在挂载完生命周期里请求数据开发子组件开发父组件
知识点
1.todolist是什么
管理用户要做的事件,可以添加事件,把事件标记为正在进行或已经完成,也可以删除事件。
React, { Component } from 'react'export default class List extends Component { render() { //过滤list数组 let list = this.props.list.filter(item => item.checked === this.props.checked) return (
4.效果展示
授课思路
案例作业
1.上网阅读相关质料 2.练习todolist 3.预习投掷骰子游戏
十一、骰子游戏
课程目标
用到知识点有哪些父组件子组件效果展示
知识点
1.用到知识点有哪些
组件划分。 父子组件传值。 随机函数Math.random()。 Promise()。 考察学生的逻辑思维能力,运用所学的知识分析问题,解决问题。
2.父组件
核心代码在父组件。
import React, { Component } from 'react'import Header from './components/Header'import Dice from './components/Dice'import Money from './components/Money'import Footer from './components/Footer'export default class App extends Component { state = { score: 10000, money: 0, guess: 0, //0:小, 1:大, 2:豹子 diceArr: [] } //累加金额 handleAdd(money) { this.setState({ money: this.state.money + money }) } //清空金额 handleClear() { this.setState({ money: 0 }) } //开始投掷骰子 async handleStart(guess) { console.log('开始:' + guess) let arr = [] await new Promise((resolve) => { let count = 0 let timer = setInterval(() => { arr = [] for (let i = 0; i < 3; i++) { arr.push(Math.floor(Math.random() * 6 + 1)) } this.setState({ diceArr: arr }) count++ if (count === 20) { clearInterval(timer) resolve(true) } }, 50) }) //求和,也可以用for循环 let sum = arr.reduce((total, item) => { return total + item }, 0) console.log(sum) let isWin = false //赌小,赢了 if (sum <= 9 && guess === 0) { isWin = true } else if (sum >= 10 && guess === 1) { //赌大,赢了 isWin = true } //赌豹子赢了 if (arr[0] === arr[1] && arr[1] === arr[2] && guess === 2) { isWin = true } console.log(isWin) //赢了 if (isWin) { if (guess !== 2) { this.setState({ score: this.state.score + this.state.money }) } else { this.setState({ score: this.state.score + this.state.money * 24 }) } } else { //输了 this.setState({ score: this.state.score - this.state.money }) } } render() { return (
3.子组件
Header.js:
import React, { Component } from 'react'export default class Header extends Component { render() { return (
Dice.js:
import React, { Component } from 'react'export default class Dice extends Component { render() { return (
Money.js:
import React, { Component } from 'react'export default class Money extends Component { render() { return (
Footer.js:
import React, { Component } from 'react'export default class Footer extends Component { render() { return (
4.效果展示
授课思路
案例作业
1.上网阅读相关质料 2.练习骰子游戏 3.预习路由
十二、路由
课程目标
什么是路由装包常用的路由组件和方法官网
知识点
1.什么是路由
路由这个概念由后端而来,后端的接口url也叫路由。后来前后端分离了,前端功能越来越强大,有了单页面应用这个概念。前端使用浏览器history api或者hash实现了前端路由,效果就是不依赖后端前端自己实现在单页面中实现多页面的效果。
2.装包
yarn add react-router-dom
3.常用的路由组件和方法
组件: BrowserRouter、Switch、Route、Redirect、NavLink
方法: withRouter(),this.props.history.push()
4.官网
2.练习路由配置 3.预习登陆(结合路由跳转)
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~