React中级学习（第一天）

Props深入

children

  • 作用 : 获取组件标签的 子节点
  • 获取方式 : this.props.children
<App>此处的内容，就是组件的 children，将来通过组件的 props.children 就可以获取到这些子节点了
</App>

props 校验

  • 作用：规定组件props的类型约束, 减少开发中的错误

  • prop-types 校验规则

  • 安装 : yarn add prop-types

  • 导入 : import Propypes from 'prop-types'

  • 给组件添加校验规则

    // 要对某个组件里的某个属性进行校验
Child.propTypes = {// age 表示要校验的属性名称// number 表示类型是数字// isRequied 表示必填项age : PropTypes.number.isRequired,name : PropTypes.string,arr : PropTypes.array,fn : PropTypes.func,isOK : PropTypes.bool,// 任何可被渲染的元素（包括数字、字符串、元素或数组）// (或 Fragment) 也包含这些类型。optionalNode: PropTypes.node,// 你可以让你的 prop 只能是特定的值，指定它为 枚举类型。num : PropTypes.oneOf(['News', 'Photos']).isRequired,// 一个对象可以是几种类型中的任意一个类型optionalUnion: PropTypes.oneOfType([PropTypes.string,PropTypes.number]).isRequired,
}

props的默认值

  • 可以通过 组件.defaultProps = {} 这样的方式来给组件添加默认值
  • 默认值在用户没有传递该组件时会生效，如果用户传递了该属性，那么就会使用用户传递的属性了
// 默认值
Child.defaultProps = {age : 10
}

生命周期

  • 生命周期图谱
  • 图示:

在这里插入图片描述

第一阶段 : 挂载阶段

  • 触发时机 : 组件第一次被渲染的时候, 进入页面的时候触发
  • 三个钩子函数
    • constructor() : 初始化state
    • render() : 渲染UI
    • componentDidMount() : 1.操作DOM 2. 发送ajax请求
  • 触发顺序 : constructor --> render --> componentDidMount
  // 类组件class Child extends React.Component {//1.1. 构造函数// 初始化数据constructor() { super()this.state = {name :'zs'}console.warn('constructor');}//1.2. 渲染UI render () {console.warn('render');return (<div><p>哈哈 {this.state.name}</p></div>)}//1.3. 挂载之后  渲染之后// 操作DOM ,发送ajaxcomponentDidMount () {console.warn('componentDidMount');}}

第二阶段 : 更新阶段

  • 执行顺序 : render --> componentDidUpdate
  • 三种触发组件更新的方式
    • setState() : 修改 state 的值
    • new Props : 表示组件接收到一个新的 props 值。在父子组件关系中，当父组件中状态更新时，最新的 props 会自动传入到子组件中，从而触发子组件的重新渲染。不管是函数组件还是class组件，都会触发重新渲染
    • forceUpdate() : 表示强制组件重新渲染 (一般不会用 知道就好)
  • 注意点：
  • 注意1 : componentDidUpdate 钩子函数中获取到的是 更新后的 DOM 内容
    • 想获取之前的, 使用 componentDidUpdate (preProps,preState) {
    • 参数是之前的props 和 state
  • 注意2 : 在 componentDidUpdate 钩子函数中，不能直接调用 setState() 否则，会递归渲染，造成死循环。如果要调用 setState()，应该放在一个 条件判断 中
class Parent extends React.Component { state = {pmsg :'撩妹'}render () { return <div><button onClick={this.updateProps2Child}>按钮修改props</button><Child msg={ this.state.pmsg }></Child></div>}updateProps2Child = () => { // 演示2 : 修改父的state 其实就是修改 child 的props , 重新调用 child 的renderthis.setState({pmsg : '撩汉'})}
}//2. 类组件class Child extends React.Component {state = {name :'zs'}//2.1. 渲染UI render () {console.warn('render');return (<div><p>哈哈 {this.state.name}</p><p>父传过来的 : { this.props.msg }</p><button onClick={this.updateName}>按钮</button></div>)}//更新state 的name 数据updateName = () => { // 演示1 : setState 重新调用 renderthis.setState({name : 'ls'})// 演示3 : forceUpdate 重新调用 renderthis.forceUpdate()}// 2.2 组件更新// 上一次的 props 和  上一次的state componentDidUpdate (preProps,preState) { console.warn('组件更新之前的数据', preState);// this.state 当前最新的state console.warn('组件更新之后的数据',this.state); // 有条件的渲染 不然会造成死循环if(this.state.name !== preState.name) {this.setState({name : this.state.name})}}}

第三阶段 : 卸载阶段

  • componentWillUnmount：在组件卸载时会触发，也就是 组件从页面中消失的时候
  • 作用：执行清理工作
    • 比如：清理掉 定时器、解绑手动绑定的事件 等
// 第一步 : 在父组件里 点击按钮, 把 子组件给销毁
class Parent extends React.Component { ...render () { return <div><button onClick={this.changeShow}>按钮修改props</button>{ this.state.isShow && (<Child msg={ this.state.pmsg }></Child>) }</div>}changeShow = () => { // 点击按钮 子组件被销毁卸载this.setState({isShow : false})}
}// 第二步 :  在 Child 组件里 
componentDidMount () {//1. 开始定时器this.timerId = setInterval(() => {console.log('好嗨哟');}, 1000);//2. 给window注册鼠标触摸事件window.addEventListener('mousemove', this.handleMouseMove)
}// 触摸事件处理函数
handleMouseMove = (e) => { console.log(e.clientX);
}// 第三步 :  在将要卸载的钩子函数里 清除定时器和 移除鼠标移动事件
// 将要卸载
componentWillUnmount () { //1. 清除定时器clearInterval(this.timerId)//2. 移除鼠标触摸事件window.removeEventListener('mousemove',this.handleMouseMove)
}

render-props 和 高阶组件 的介绍

  • 什么情况下 会使用这两种模式 ? 复用

  • 当两个组件或者多个组件有一部分state 和 操作 state 的方法 相同或者相似的时候, 就可以将这些代码逻辑使用这两种模式来实现复用

  • 目的 : 状态逻辑复用 ==> 通俗点说 : 另一种封装形式

  • 要复用的内容为 :

    • state
    • 操作 state 的方法

  • 注意

    • 不管是高阶组件还是 render-props 模式, 都要将状态逻辑封装在一个组件中
    • 并且这个组件只提供状态和操作状态的方法逻辑
    • 这个组件不提供要渲染的UI结构, 因为要渲染的内容不确定

  • 学习注意 :

    • 思想重于代码

render-props 的使用

拷贝 Mouse.js 并简单介绍

  • state : {x,y} 鼠标坐标
  • 注册鼠标移动事件和移除 事件
  • 移动事件吹函数 保存鼠标位置

演示1 : 鼠标位置

// 位置
// 1. 使用 mouse组件 添加一个render属性, 值类型为一个函数
// 2. 可以得到一个mouse 位置坐标
// 3. 通过return 什么, 页面就会显示什么
ReactDOM.render(<Mouse render={(mouse) => { console.log(mouse);return <h1>{mouse.x} - {mouse.y}</h1>
}}/>,document.getElementById('root'))

演示2 :移动猫

// 引入图片 
import cat from './images/cat.png'// 渲染
ReactDOM.render(<Mouse render={mouse => { return <img style={{ position : "absolute", left:mouse.x-64, top:mouse.y-64 }} src={cat} alt=''/>} }/>,document.getElementById('root'))

总结使用共同步骤

  • 1.给 Mouse 组件传递 render 属性 ( render属性的值 是一个函数 )
  • 2.通过 render 函数属性的参数 来获取组件内部复用的状态 (比如 : 鼠标位置数据)
  • 3 通过render函数属性的返回值来指定最终要渲染在 页面中的内容

####分析Mouse 组件内容

  • Mouse 组件 只负责
    • 提供 鼠标位置 state
    • 提供操作数据位置的逻辑代码
  • 注意 : Mouse 组价 自身不指定要渲染的内容, 因为 Mouse 组件自身要渲染的什么内容
    • 实际上是由用户在使用该组件时指定的
  • 思想 : Mouse 组件通过调用 props.render() 方法, 将组件内部的状态暴露到组件外部, 这样, 用户在使用该组件时, 就可以通过 render 属性的参数来获取到组件内部的状态了
// 封装 Mouse 组件 Mouse.js，
// 实现鼠标位置的复用
// 状态逻辑复用：1 state 2 操作状态
class Mouse extends React.Component {// 提供鼠标位置的状态state = {x: 0,y: 0}// 监听鼠标位置componentDidMount() {window.addEventListener('mousemove', this.handleMouseMove)}// 组件卸载时执行清理工作：解绑事件componentWillUnmount() {window.removeEventListener('mousemove', this.handleMouseMove)}// 更新鼠标位置handleMouseMove = e => {this.setState({x: e.clientX,y: e.clientY})}render() {// 通过 props 来获取到传递给组件的属性 render// 因为 render 是一个函数，所以，就可以调用// 在调用 render 函数时，将组件内部的状态，传递给 render 函数// 最终，通过 render 的形参，就可以在组件外部获取到组件内部的状态了// this.props.render(this.state)// return null// 通过 render 函数的返回值来指定要渲染的内容// 所以，在组件内部直接使用 render 函数的返回值来作为该组件要渲染的内容return this.props.render(this.state)}
}

使用 children 代替 render 属性

  • 注意 : 不是该模式叫 render-props 模式, 就必须使用render 属性
    • 实际上, 只要有一个属性来告诉组件要渲染什么内容, 其实这就是 render-props 模式了
  • 推荐 : 使用 children 代替 render 属性
  • 使用 children 演示位置和猫
// 1 . 位置
ReactDOM.render(<Mouse>{(mouse) => { return <p>{mouse.x} - { mouse.y }</p>        # +} }
</Mouse>, document.getElementById('root'))
// 2 . 猫
ReactDOM.render(<Mouse>{mouse => { return <img style={{ position:'absolute', left:mouse.x-64, top:mouse.y-64 }} src={cat} alt=""/>  											        # +}  }
</Mouse>, document.getElementById('root'))// 3. Mouse.js 内部
render() {// 改为 children return this.props.children(this.state)
}

使用场景

  • 场景1 : 之前的 Context 使用的就是这个模式
// 提供数据
<Provider value={ this.color } ></Provider>// 消费数据/使用数据
<Consumer>
{ data => <span>--{data} </span>}
</Consumer>
  • 场景2 : 动画插件 react-spring
  • github地址
  • 安装 : yarn add react-spring
  • 使用 : Render-props api ==> spring
// 引入
import {Spring} from 'react-spring/renderprops'// 使用
ReactDOM.render(<Springconfig={{ duration:4000 }}from={{ opacity: 0 }}to={{ opacity: 1 }}>{props => { console.log(props);return <div style={props}>hello</div>}}
</Spring>, document.getElementById('root'))

高阶组件的使用

  • render-props 模式 和 高阶组件 都是 用来做复用的 : state 和 操作 state 的方法

高阶组件介绍

  • 高阶组件 : HOC : High-Order Component

  • 实际上就是一个函数, 这个函数能够接受一个参数组件, 然后,返回一个增强后的组件

  • 参数组件 : 就是需要被包装的组件

  • 返回的组件 : 增强后的组件, 这个组件中就是通过Props来接收到复用的状态逻辑的

  • 思想 : 就是组件在增强的过程中, 传入了一些数据给 组件的 props

const 增强后的组件 = 高阶组件(被包装组件)

高阶组件使用演示

  • 高阶组件的代码
// 这就是一个高阶组件
// 职责 : 1 提供鼠标位置状态 2 提供鼠标位置的方法 
const withMouse = WrappedComponent => {class Mouse extends React.Component {// 鼠标位置状态state = {x: 0,y: 0}// 进入页面时，就绑定事件componentDidMount() {window.addEventListener('mousemove', this.handleMouseMove)}// 鼠标移动的事件处理程序handleMouseMove = e => {this.setState({x: e.clientX,y: e.clientY})}// 移除事件componentWillUnmount() {window.removeEventListener('mousemove', this.handleMouseMove)}render() {return <WrappedComponent {...this.state} />// return <WrappedComponent x={this.state.x} y={this.state.y} />}}return Mouse
}

演示1:创建位置组件

//1. 演示1 位置组件
const Position = props => { console.log(props) // 增强之前props是没有值的return <p>x:{props.x} y:{props.y}</p>
}// 如何使用? 
// 增强后 = withMouse(增强前)
HOC_Position =   withMouse(Position)// 渲染 
ReactDOM.render(<HOC_Position/>, document.getElementById('root'))

演示2 : 创建移动猫组件

//2.演示2 : 移动猫
const Cat = props => {console.log(props);return <img style={{ position:"absolute", left:props.x-64, top:props.y-64 }} src={cat} alt=""/>
}// 使用高阶组件增强一下
HOC_Cat = withMouse(Cat)// 渲染 
ReactDOM.render(<HOC_Cat/>, document.getElementById('root'))

高阶组件分析

  • 高阶组件名称 约定 以 with 开头
  • 指定函数参数，参数应该以大写字母开头（作为要被包装的组件）
  • 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
  • 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
  • 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中
const withMouse = (WrappedComponent) => {class Mouse extends React.Component {    ... 省略鼠标位置状态 和 操作鼠标位置的方法逻辑render() {return <WrappedComponent {...this.state} />      #  核心}}return Mouse
}

给高阶组件添加displayName (我们自己封装高阶组件)

  • displayName：用于设置 react-dev-tools （浏览器中的react插件） 中组件的展示名称
  • 注意：该属性仅仅用于设置展示名称，并不会对组件功能产生影响，所以，如果不想再 react-dev-tools 中进行区分，实际上，可以省略该设置。
  • 演示 : 效果
// 同时渲染多个高阶组件的时候
ReactDOM.render(<div><HocPosition/><HocCat/>
</div>, document.getElementById('root'))// 在 react-dev-tools 上面显示的是这样的
<Mouse>...</Mouse>
<Mouse>...</Mouse>// 这样很不容易区分,所有需要添加displayName
  • 如何 设置 displayName ?
const withMouse = (WrappedComponent) => {class Mouse extends React.Component {... 省略鼠标位置状态 和 操作鼠标位置的方法逻辑}// 给高阶组件设置名称，将来在 react-dev-tools 工具中，能够区分到底是哪一个高阶组件包装的组件function getDisplayName(WrappedComponent) {                          # +return WrappedComponent.displayName || WrappedComponent.name }Mouse.displayName = getDisplayName(WrappedComponent)                 # +// 如果还想体现出来是高阶组价,就加个前缀Mouse.displayName = `WithMouse_${getDisplayName(WrappedComponent)}`  # +return Mouse
}
- 补充: 
- 先获取被包装组件的 displayName ,如果没有就获取它的名字,如果再没有来个默认的最起码不会报错或者返回undefined
- WrappedComponent.displayName || WrappedComponent.name

给高阶组件传递属性 (我们自己封装高阶组件)

  • 问题 : 如果给 高级组件传属性, 发现会丢失,
  • 原因 : 高级组件内部给创建的Mouse组件内没有赋值属性. 即 高阶组件没有往下传递 Props
  • 解决办法 : 渲染 WrappedComponent时, 将 state 和 this.props 一起传递给 Mouse组件
  • 传递方法
// 如果多加了属性
<HocPosition name='jack'/>// 高阶组价内部 :
const withMouse = (WrappedComponent) => {class Mouse extends React.Component {... 省略鼠标位置状态 和 操作鼠标位置的方法逻辑render() { // 之前这里只传递给包装组件 state ,并没有传递propsreturn <WrappedComponent {...this.state}  {...this.props}  />    # ++++}}return Mouse
}// 使用
const Position = props => {// 通过 props 就可以获取到传递给高阶组件的属性了// ... 省略其他代码
}

setState() 的说明

异步更新数据

  • setState() 是异步更新数据的
  • 为什么是异步的 ?
    • 因为 setState() 可能同时被调用多次，如果是同步的话，状态就会更新多次，
    • 也就是页面要发生多次渲染，也就是发生多次重绘和重排，这样的话，会降低应用的性能。
state = { count: 0
}  console.log('前 :',this.state.count) // 0
this.setState({count: this.state.count + 1
})// for (var i = 0; i < 1000; i++) {//   this.setState({//     count: i//   })// }
console.log('后 :',this.state.count) // 0

setState 的第一种格式 : setState(stateChange, [callback])

  • 格式 : setState( 对象, 回调 )

  • [官] : callback 它将在 setState 完成合并并重新渲染组件后执行。

  • 通常，我们建议使用 componentDidUpdate() 来代替此方式。

this.setState({count : this,state.count + 1
},() => {console.log('这个回调函数会在状态更新后立即执行',this.state.count)
})

演示问题

  • 代码
console.log('前', this.state.count) // 0
// 异步更新
this.setState({count: this.state.count + 1  // 以为是 1
})
// 异步更新  + 获取 结果
this.setState({count: this.state.count + 1 // 以为是 2},() => {console.log(this.state.count) // 以为是 2 但是结果是1}
)
// 两次更新 发现结果还都是 1 ,
  • 分析
# [官] 这种形式的 setState() 也是异步的，并且在同一周期内会对多个 setState 进行批处理。
# [官] 后调用的 setState() 将覆盖同一周期内先调用 setState 的值，因此商品数仅增加一次。
let newObj = Object.assign({}, obj, { age: 20 }, { age: 30 })# [官] 如果后续状态取决于当前状态，我们建议使用 updater 函数的形式代替：

setState 的第二种格式 : setState(updater, [callback])

  • 格式 : setState(函数式, 回调)
  • 函数式 : 函数里面返回一个对象
 // 异步更新 
// 这个为什么就可以了, 因为是通过参数获取的, 是 React 控制 的,,返回的就是上次更新的
this.setState((state, props) => {return {count: state.count + 1  // 拿到最新的 0 + 1 = 1}
})
// 异步更新  + 获取 结果
// 这个为什么就可以了, 因为是通过参数获取的, 是 React 控制 的,,返回的就是上次更新的
this.setState((state, props) => {return {count: state.count + 1 //拿到最新的1 + 1 = 2}},() => {console.log(this.state.count) // 结果是2}
)
  • 简写
// 也可以简写
this.setState((state) => ({count: state.count + 1  // 以为是 1}))

总结

// 第一种格式 :  setState(stateChnage, [callback])  ★setSrare(对象, 回调)// 第二种格式 :setState(updater, [callback])  ★setSrare(函数式, 回调)// 最常用的还是 第一种格式的简化操作  setState(stateChange)   ★★★
this.setState({count : this.state.count + 1
})

{
return {
count: state.count + 1 // 拿到最新的 0 + 1 = 1
}
})
// 异步更新 + 获取 结果
// 这个为什么就可以了, 因为是通过参数获取的, 是 React 控制 的,返回的就是上次更新的
this.setState(
(state, props) => {
return {
count: state.count + 1 //拿到最新的1 + 1 = 2
}
},
() => {
console.log(this.state.count) // 结果是2
}
)


- 简写```js
// 也可以简写
this.setState((state) => ({count: state.count + 1  // 以为是 1}))

总结

// 第一种格式 :  setState(stateChnage, [callback])  ★setSrare(对象, 回调)// 第二种格式 :setState(updater, [callback])  ★setSrare(函数式, 回调)// 最常用的还是 第一种格式的简化操作  setState(stateChange)   ★★★
this.setState({count : this.state.count + 1
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/247912.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Elasticsearch集成ik分词器

Elasticsearch集成ik分词器

1、插件地址https://github.com/medcl/elasticsearch-analysis-ik/releases/download/v7.0.0/elasticsearch-analysis-ik-7.0.0.zip 2、找到对应版本的插件通过 http://192.168.1.8:9200查看ES的版本&#xff0c;找到对应的IK分词插件 下载与之对应的版本https://github.com/me…
阅读更多...
iOS NSTextAttachment - 图文混排

iOS NSTextAttachment - 图文混排

苹果在iOS7中推出了一个新的类NSTextAttachment&#xff0c;它是做图文混排的利器&#xff0c;本文就是用这个类&#xff0c;只用50行代码实现文字与表情混排&#xff0c;当然也可以实现段落中的图文混排。 首先说一下文字和表情的混排&#xff1a; 先来做点儿准备工作&#…
阅读更多...
iOS 自定义Cell按钮的点击代理事件

iOS 自定义Cell按钮的点击代理事件

在实际开发工作中&#xff0c;我们经常会在自定义的Cell中布局一些按钮&#xff0c;并且很多时候我们会在点击这个按钮的时候使我们的UItableviewController跳转到下一界面&#xff0c;有的可能还要传值。那么如何使我们的控制器能够获知我们按下了cell的按钮呢&#xff1f;毫无…
阅读更多...
js - （初中级）常见笔试面试题

js - （初中级）常见笔试面试题

1.用 js 实现一个深拷贝 2.用 js 写一个数组去重 3. 用 js 对字符串进行反转 4. 用 js 请求范围内的质数个数 5.用 js 求数组中出现最多的数及其出现次数
阅读更多...
iOS 支付宝SDK接入详解

iOS 支付宝SDK接入详解

一&#xff0c;在支付宝开放平台下载支付宝SDK&#xff08;https://openhome.alipay.com/platform/document.htm#down&#xff09; https://doc.open.alipay.com/doc2/detail.htm?spma219a.7629140.0.0.HpDuWo&treeId54&articleId104509&docType1 二&#xff0c;添…
阅读更多...
面试基本知识点

面试基本知识点

文章目录面-什么是SEO面 - cookie / localstorage / sessionstorage的区别面 - promise面试题面 - 柯里化函数面 - 函数节流面 - 函数防抖HTML / CSS 知识点1、讲讲盒模型&#xff08;蚂蚁金服 2019.03 招行信用卡 2019.04 美团 作业帮&#xff09;2、根据盒模型解释边距重叠&a…
阅读更多...
Redis 热点key

Redis 热点key

压测报redis 热点问题 热点问题概述 产生原因 热点问题产生的原因大致有以下两种&#xff1a; 用户消费的数据远大于生产的数据&#xff08;热卖商品、热点新闻、热点评论、明星直播&#xff09;。 在日常工作生活中一些突发的的事件&#xff0c;例如&#xff1a;双十一期间某些…
阅读更多...
移动IM开发那些事：技术选型和常见问题

移动IM开发那些事：技术选型和常见问题

最近在做一个iOS IM SDK&#xff0c;在内部试用的阶段&#xff0c;不断有兄弟部门或者合作伙伴过来问各种技术细节&#xff0c;所以统一写一篇文章记录&#xff0c;统一介绍下一个IM APP的方方面面&#xff0c;包括技术选型(包括通讯方式,网络连接方式,协议选择)和常见问题。 …
阅读更多...
webstrom打开通过顶部浏览器打开网页，被跳转到默认主页

webstrom打开通过顶部浏览器打开网页，被跳转到默认主页

重新开始工作啦&#xff0c;希望以后认真一点&#xff0c;并把遇到的问题都记录下来&#xff0c;虽然是小小白&#xff0c;但能无意间帮助到别人就更开心了呀 通过webstrom打开本地的文件时&#xff0c;发现跳转到了默认主页上&#xff0c;吐槽下&#xff0c;有些主页真的超级流…
阅读更多...
mockjs（接口服务代理）

mockjs（接口服务代理）

mock官网&#xff1a;http://mockjs.com/ 一、搭建一个练习项目 1.利用vue的项目脚手架进行搭建 命令&#xff1a; vue create mock-demo 截图&#xff1a; 2.安装相关的依赖 命令&#xff1a; #使用 axios 发送 ajax npm install axios --save #使用 mock.js 产生随机数据…
阅读更多...
MD5算法原理

MD5算法原理

MD5&#xff08;单向散列算法&#xff09; 的全称是Message-Digest Algorithm 5&#xff08;信息-摘要算法&#xff09;&#xff0c;经MD2、MD3和MD4发展而来。MD5算法的使用不需要支付任何版权费用。MD5功能&#xff1a;输入任意长度的信息&#xff0c;经过处理&#xff0c;输…
阅读更多...
python第五次作业——陈灵院

python第五次作业——陈灵院

习题1&#xff1a;读入文件pmi_days.csv&#xff0c;完成以下操作&#xff1a;1.统计质量等级对应的天数&#xff0c;例如&#xff1a;优&#xff1a;5天良&#xff1a;3天中度污染&#xff1a;2天2.找出PMI2.5的最大值和最小值&#xff0c;分别指出是哪一天。 import csv impo…
阅读更多...
iOS 二叉树相关算法实现

iOS 二叉树相关算法实现

什么是二叉树&#xff1f; 在计算机科学中&#xff0c;二叉树是每个节点最多有两个子树的树结构。通常子树被称作“左子树”和“右子树”&#xff0c;左子树和右子树同时也是二叉树。二叉树的子树有左右之分&#xff0c;并且次序不能任意颠倒。二叉树是递归定义的&#xff0c;所…
阅读更多...
vux 组件库首次使用安装

vux 组件库首次使用安装

1、首先通过脚手架新建一个项目&#xff0c;过程略。 创建完项目后&#xff0c;在项目里安装vux&#xff0c; 通过命令 npm install vux --save 安装 2、安装vux-loader&#xff0c; 通过命令 npm install vux-loader --save-dev 安装&#xff08;vux文档没说明&#xff09; 3、…
阅读更多...
爬取豆瓣top250

爬取豆瓣top250

#xpath #第一种方法 可在开发者工具中找到标签&#xff0c;右键copy xpath&#xff0c;有时需去掉tbody标签 #第二种方法 简单学习xpath&#xff0c;自己书写&#xff0c;掌握基本语法即可&#xff0c;简单的层级关系#先将csv文件以记事本打开&#xff0c;更改编码为ASNI&…
阅读更多...
LED音乐频谱之点阵

LED音乐频谱之点阵

转载请注明出处&#xff1a;http://blog.csdn.net/ruoyunliufeng/article/details/37967455 一.硬件 这里的LED选择直插的雾面LED&#xff0c;亮度可以还不失美观。注意每行要加上限流电阻。74HC138&#xff08;三八译码器&#xff09;作为列选&#xff0c;每行都连着74HC595&a…
阅读更多...
上架相关——App Store 上架流程

上架相关——App Store 上架流程

说实话&#xff0c;公司要上架一个自己做的一个小项目。为了完成这个任务&#xff0c;菜鸟的我一遍找资料一遍跟着做&#xff0c;一遍修改错误一遍查找解决方案。网上的资料大部分都是2015年以前的资料&#xff0c;资料有点不够过时&#xff0c;而且步骤配图也不是很详细&#…
阅读更多...
上架相关——appstore 更新app版本

上架相关——appstore 更新app版本

注&#xff1a;此片文章是基于app已经上架&#xff0c;也就是证书都已经配置好的前提下。 首先是还是app打包 修改版本号 修改project处的pp文件 检查无误后打包打包完成后upload to app store 漫长的等待。。 上传到appstore进入iTunesConnect 选择我的app 选择对应app点…
阅读更多...
iOS开发 蓝牙技术4.0详解

iOS开发 蓝牙技术4.0详解

前言 前端时间,同学在做项目过程中遇到关于蓝牙方面的问题,今天我就给大家进行详细的进行讲解下蓝牙在iOS开发中的具体实现.在介绍蓝牙前,大家要搞清楚什么是蓝牙? 什么是蓝牙? 随着蓝牙低功耗技术BLE&#xff08;Bluetooth Low Energy&#xff09;的发展&#xff0c;蓝牙技术…
阅读更多...
前端面试题（五）

前端面试题（五）

position的属性有哪些&#xff1f; 1、absolute生成绝对定位的元素&#xff0c;相对于值不为 static的第一个父元素进行定位。 2、fixed &#xff08;老IE不支持&#xff09;生成绝对定位的元素&#xff0c;相对于浏览器窗口进行定位。 3、relative生成相对定位的元素&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023