- 博客(30)
- 问答 (6)
- 收藏
- 关注
RSS订阅原创 js内置api-获取时间及其常用的方法
let date=new Date() // 获取当前时间date.getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。date.getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。date.getMonth() 从 Date 对象返回月份 (0 ~ 11)。date.getFullYear() 从 Date 对象以四位数字返回年份。date.getYear() 请使用 getFullYear() 方法代替。date.getHours() 返回.
2022-05-10 16:38:02
851
1
原创 字符串转化数组，数组转字符串，删除数组指定位置的数据
arr=string.split('切割条件'); //将字符串按照切割条件，转化为一个数组let str='123.456.789'arr1=str.splti('.')console.log(arr1)//打印结果为['123','456','789']
2021-03-20 08:35:10
235
原创 git常用指令，回退指定版本，首次提交远程，切换合并分支，git初始化
查看版本记录：git log查看文件状态：git status查看文件状态简化版：git status -s添加暂存区：git add .提交版本：git commit -m’ ************ ’回退指定版本：git reset --hard 版本号
2021-03-12 09:26:55
89
原创 在jsx中使用循环渲染
在jsx语法中使用循环渲染，主要使用场景为列表渲染，于vue不同，vue使用的是v-for循环渲染，jsx语法中不支持类似语法，如果要使用循环渲染，可以使用数组的map（）方法，注意：循环渲染列表时，应该对每一项添加对应的key属性，且key属性的值要确保唯一性const list = [ { id: 1, name: '笑纳' }, { id: 2, name: '你的答案' }, {
2021-02-09 11:10:11
3110
2
原创 如何给多个input框绑定同一个change事件
给表单控件设置name属性初始化，state中用表单的name值为属性用于绑定对应input框给对应的input框绑定value值通过e.target.name获取当前操作的input框的name值给对应的input框赋值代码如下：import React from 'react'export default class App extends React.Component { state = { name: '', password: '' } on.
2021-01-29 18:01:49
2948
原创 React 高阶组件示例
react中组件经常会重复使用，所以我们可以封装组件进行多功能的复用，常用的组件复用模式有：render props模式和高阶组件模式高阶组件使用步骤：创建一个以with开头函数（目前我们约定with开头的组件为高阶组件）指定一个函数参数，首字母大写，作为渲染组件的组件名函数内部创建一个类组件，用来提供用于复用的逻辑代码并返回在高阶组件内渲染参数组件，将状态通过props传递给参数组件调用高阶组件，传入想要增强的组件，通过返回值拿到新组建，并渲染到页面中注意：react组件默认用组件名称为
2021-01-10 17:59:09
305
原创 React组件绑定ref的方法
使用字符串绑定，类似于vue中ref的用法，此方法React新版本不推荐，为防止后期废除，不建议使用export default class App extends React.Component { handleClick=()=>{ console.log(this.refs.inputRef.value); } render() { return ( <div> .
2021-01-09 10:49:03
1525
原创 React-redux使用（一）
最近有在使用react-redux进行全局状态托管，长时间不用遗忘了不少，所以今天记录下一个基本使用代码，以便之后复习使用下载redux和react-redux两个包npm i reduxnpm i react-redux在src页面创建reducer和store两个文件reducer页面代码// 初始化stateconst initState = { sum: 10}exports.reducer = (state = initState, action) => {
2021-01-08 11:07:52
111
原创 解决非Router直接调用渲染的组件获取不到history属性问题
在日常开发中，经常会封装好公共的自定义组件，方便在其他组件中复用，这很容易造成一下问题：在公共组件中调用history属性来返回上一级失败，这是因为我们封装的组件并不是通过Route直接触发渲染的，所以在调用history时并没有拿到相应数据，这个时候我们可以使用React -Router中的withRouter函数将自定组件包裹，withRouter函数返回值也是一个组件，所以能通过props拿到相对应的属性，function NavHeader（{children，history}）{ retu
2021-01-07 11:47:14
392
原创 React组件性能优化
减轻state申明变量的时候，将不直接用于页面渲染的数据不放在 state 中，state 只用来存储用来渲染页面UI结构的数据，其余数据（定时器ID，或者仅用来做逻辑判断的数据）可以存储到 this 中避免不必要的重新渲染组件的更新机制：父组件更新会引起所有的后代组件发生重新渲染，子组件没有任何变化的额时候也会发生重新渲染，所以我们要避免这种不必要的重现渲染来优化组件性能，方法：使用钩子函数（shouldComponentUpdate（nextProps,nextState）），该钩子函数.
2021-01-03 16:24:33
60
原创 React组件更新机制
setState的两个作用，一个是修改state的，另一个是更新UI组件react中组件更新时，其子组件或者说后代所有组件也会更新，但不会影响父组件、兄弟组件及兄弟组件的子组件。如下图，可以概括为：当父组件更新的时候，他的所有后代组件都会发生渲染；子组件1-1更新时，子组件1-1、1-1-1、1-1-2都会发生更新渲染，子组件1-2和父组件都不会发生更新渲染子组件1-2更新时，子组件的1-2、1-2-1、1-2-2会发生渲染，其他都不会渲染，如果组件1-2-1或者1-2-2还有子组件，那么也会发
2021-01-03 15:05:37
1534
原创 React中setState推荐语法及其作用
在react中最常用的方法就是修改参数setState，但该方法是异步执行的，所以很多时候在同一个函数中，需要用到修改状态之后的数据，那么常用的语法不能满足该条件，所以此时我们可以使用setState的推荐语法：this.setState((state,props)=>{ // 执行修改数据的代码 sum:state.sum + 1, num:props.num}[,()=>{ // 如果需要用到此时修改之后的代码，在此处执行代码即可 localStorage.setItem('l
2021-01-03 11:11:54
269
原创 React中引用本地图片资源注意点
在React中使用图片资源要注意一下两点：React中使用图片要使用 ES6 的 import 模块化引入的方法先将所需要的图片导入先将图片原文件放到 src 目录下保存才能被引入到项目组件中在 React 中使用图片的时候 alt 属性不能省略，如果不适用该属性，可以设置 alt=“”，但不能不写...
2021-01-02 15:01:59
370
原创 JSX中使用JavaScript表达式注意点
单花括号中可以使用任意的JavaScript表达式JSX本身也是一个js表达式JSX中不能使用对象，但是在style属性中可以使用不能在单花括号中直接使用 if/for 等语句
2021-01-02 14:33:57
384
原创 数组解构注意点
函数参数是解构出来的数组时在处理数据的时候要注意函数内部使用解构的方式对其进行添加删除操作是不能传到函数外面的，但是函数运行不会报错，// 错误示范addItem ({ tolist }, value) { tolist = [value, ...tolist] this.commit('storage') }, // 运行以上函数会执行函数内打印正常，但是后面调用的函数拿到的tolist数据还是以前的数据可用以下方法解决addItem (state, v
2020-12-30 18:44:23
168
原创 react组件卸载阶段钩子函数
react组件的卸载阶段只有一个常用的钩子函数：componentWillUnmount（）在逐渐卸载（即从页面中消失）的时候触发，一般用来执行清理工作
2020-12-30 11:25:44
1145
原创 react组件更新阶段钩子函数
react组件更新阶段有两个钩子函数，在组件被更新时调用更新触发条件有三种：setState（）方法被调用时，被修改的数据将会重新渲染到页面组件接收到新的数据强制更新时forceUpdate（）两个钩子函数执行顺序：render（）=>componentDidUpdate（）render（）在组件渲染是会触发，和创建阶段的render（）是同一个钩子函数componentDidUpdate（）在组件渲染完成后触发注意：如果要在componentDidUpdate（）中使用setS
2020-12-30 11:17:09
1030
原创 react组件创建阶段钩子函数
react组件创建阶段有三个钩子函数，执行顺序：constructor（）创建组件时最先执行，一般用来做初始化操作，例如：初始化state，更改函数this绑定等操作render（）组件每次被渲染的时候都会触发，主要用来渲染UI结构，render（）函数中不能调用setState（）方法componentDidMount（）组件DOM渲染完成后执行，可以用来发送网络请求和DOM操作...
2020-12-30 10:38:13
282
原创 react组件生命周期
生命周期概述：组件的生命周期指从组件被创建到运行再到组件不使用时被卸载的全过程，react组件的生命周期分为 创建、更新、卸载 三个阶段，每个阶段都有相对用的钩子函数，在不同时期使用不同的钩子函数，使组件完成更为复杂的组件功能注意：只有类组件才有生命周期！！！...
2020-12-30 10:23:41
51
原创 设置组件的props默认值
创建组件的时候可以通过 App.defaultProps={} 的方式给组件设置默认值，当使用组件的时候，该属性未传值时生效，有新的值传入时以传入的值为准const App =props=>{ console.log(props); return ( <div>组件中的num：{props.num}</div> )}App.defaultProps ={ num:10}ReactDOM.render(<App
2020-12-30 09:36:37
782
原创 props校验
在我们工作中，很多时候是协作开发，这时候就会使用到别人写的组件，或者自己提供组件给自己的同事，无法确定组件使用者传入什么格式的数据，如果传入格式不正确就会报错。如果我们在开发组件的时候并没有使用props校验，那么系统就无法给出准确的错误原因，所以我们开发组件的时候要使用props校验来方便协同开发。在创建组价的时候指定props的类型格式等，捕捉组件使用过程中因为props导致的错误，给出明确的提示，增加组件的可用性props检验使用步骤如下：安装prop-types包（npm i prop-t
2020-12-29 18:53:17
210
原创 props中children属性
children属性表示React组件标签的子节点，当组件标签中有字节点的时候React的props就会自动生成children属性children属性与props属性一样，值可以是文本、React元素、组件、函数等。const App = (props) => { return ( <div> <div style={{color:'red'}}>我是父组件</div> {props.children} </d
2020-12-29 18:34:08
945
原创 React中使用context向后代组件传参
当我们组件内嵌套多层后代组件的时候用props传参就显得繁琐，且不美观，这时候我们可以用context向后代组件直接传参：调用React.createContext()创建两个组件（Provider、Consumer）分别用来提供数据和接收数据使用Provider组件作为提供数据的父节点给Provider组件设置value属性，需要传递到后代组件中的数据作为value的值调用Consumer组件接收数据（该组件内部是一个回调函数，形参就是从Provider组件传过来的参数）代码示例：clas
2020-12-29 16:19:17
234
原创 React兄弟组件中传递参数
React中，兄弟组件之间传值，可以使用状态提升的方式进行传递参数将两个兄弟组件中需要穿的参数提升到父组件中，由其公共的父组件来管理状态，由公共组件提供共享状态和修改共享状态的方法，子组件使用props接收状态或操作状态的方法，就可以实现兄弟组件之间的传参// 父组件class Parent extends React.Component { state={count:0} addCount=(data)=>{ this.setState({
2020-12-29 15:02:26
1917
2
原创 React子组件向父组件传参
react中子组件向父组件传参，可以先在父组件申明一个带有形参的函数方法，父组件自己不调用，然后通过子组件调用父组件的方法时传递实参的方式将参数传递给父组件，代码示例如下：class Parent extends React.Component { state={ parentMsg:'' } showMsg=(data)=>{ this.setState({ parentMsg:data })
2020-12-29 12:00:10
1875
原创 React中props传递数据
组件的props要接收组件外部的数据可以通过props来实现props用来接收传递给组建的数据数据的传递可以用给组件标签添加属性的方式接收数据：函数组件可以通过参数props来接收数据，类组件可以通过this.props接收数据，实例：类组件传递数据：class Hello extends React.Component { render() { console.log(this.props); return ( <div&g.
2020-12-29 11:04:19
787
原创 React事件绑定中的this指向
React时间绑定中的this指向1、箭头函数//代码抽离之后，在命名函数的时候使用箭头函数，handlerClick=()=> { this.setState({ count: this.state.count + 1 }) }render() { return ( <div> <h1> 计数器:{this.state.count}
2020-12-27 14:33:26
244
空空如也
threejs预览全景图，路径显示跨域怎么办
2022-02-16
已知一个链接，如何做一个下载按钮？
2021-09-11
文件上传怎么更改文件名，
2021-03-10
多个element中的slider怎样完成联动
2021-01-08
react创建百度地图，页面不显示
2021-01-05
arr.map(parseInt)
2020-12-30
TA创建的收藏夹 TA关注的收藏夹
TA关注的人