1 01^(经常)

413 阅读6分钟

【2019年】 2/13: 1:React中,setState方法实现的方式是异步,需要通过生命周期的方式才能正确更新组建内容。 2/15 1:FormDate 对象用法(参考链接) 2/18 1:mock.js 模拟数据插件概念和用法 (参考链接) 2/19 1:把父级的display设置成flex可以将其子级横向排列,若子集中有文字节点,且出现折行显示,可以对其的white-space设置为pre,并设置line-height进行垂直调整即可。 2/21 1:react中用函数方式创建组建时,不能使用state和生命周期,因而函数方式的无状态组件只能访问输入的props,同样的props会得到 同样的渲染结果,不会有副作用,因此需要父级来协助更新渲染组建。 2/24 1:location.href = url 可以将当前的url重定向到新的地址上去; 2:js-cookie插件是一个JS操作cookie的插件,源文件只有3.34 KB,非常轻量级。js-cookie也支持npm和Bower安装和管理。

设置cookie Cookies.set('name', 'value', { expires: 7, path: '' });//7天过期 Cookies.set('name', { foo: 'bar' });//设置一个json b、读取cookie Cookies.get('name');//获取cookie Cookies.get(); #读取所有的cookie c、删除cookie Cookies.remove('name'); #删除cookie时必须是同一个路径。

3/4 1:import * from 'xx' 将导入整个模块的内容,且默认为再default属性下的内容,而 import defaultName(需要和export default 一起用) 和 import { export1, export2 } 将导入export的某个对象或值;import的形式需要export的支持,比如 import defaultName from 'module.js 将导出 在modules.js中export default的对象或值; 3/8 1:在angular中,对于组件的传值需要注意的一个点:js文件里,若传值的变量名为aB形式的时候,在调用组件的html文件里的赋值的变量名必须a-b的形式。 3/12 1:编程模式——发布订阅模式

//执行函数
let todo = () => {
  a: () => {
    .....
  },
  b: () => {
  ......
  },
  .....
}
// 添加订阅函数
let list = [];
let add = (fn) => {
  list.push(fn);
}
// 发布函数
let release = () => {
  list.forEach(fn => {
    fn();
  }) 
}
// 订阅函数
let subscribe = () => {
  for (let key in todo) {
    if (todo.hasOwnProperty(key)) {
        add(todo[key])
    }     
  }
}

3/14 1:js代码执行机制:segmentfault.com/a/119000001… 3/19 1:要判断JS中的两个数组是否相同,元素位置也相同,需要先将数组转换为字符串,再作比较,即Array.toString(); 2:在setTimeout()中可以传递大于两个参数,而第三个参数开始,是可以作为参数传入setTimeout()中的函数中作为实参。 3:判断键盘输入是否是数字:/[\d].test(String.fromCharCode(event.keyCode))/ 3/21 1:在react的router中采用 ,只有一个路由会被渲染,并且总是渲染第一个匹配到的组件。因此,在第一个路由中,还是需要使用 exact,否则,当我们渲染如 '/users' 或 '/users/add' 时,只会显示匹配 '/' 的组件(PS:如果不使用 ,当我们不使用 exact 时,会渲染匹配的多个组件)。所以,将 '/user/add' 路由放在 '/users' 之前更好,因为后者包含了前者,当然,我们也可以同样使用 exact,这样就可以不用关注顺序了。再来说一下 组件,单独使用时,一旦当路由匹配到的时候,浏览器就会进行重定向跳转;而配合 使用时,只有当没有路由匹配的时候,才会进行重定向。 3/22 1:在react中继承的component里,如果有定义为变量组件的话,该组件只会被渲染一次,因为在component中,变量的定义其实是const,所以默认为常量,因而只会被渲染一次,因而所有关于变化的值所导致的重新渲染都是失效的; 3/28 1:数组的map方法,需要在执行的回调函数中return最新的数组项,不然返回的是undefined 2:Promise.map 方法,这个相当于把常见的 Array.map 创建 Promise 的过程和 Promise.all 结合起来。机制就是当所有promise内容循环完毕加入到promise.all的方法,然后等待所有的promise执行完毕或遇到失败状态返回结果。使用then方法进行下一步。 4/1 1:for-in常被用来循环对象;遍历数组用for-of;不然,对数组遍历用for-in,eslint会报he body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype eslint的错误 4/13 1:setState()一定是异步更新吗?答案是: 不是! 实际上,由 React 控制的事件处理过程 setState 不会同步更新 this.state!而绕过 React 通过 JavaScript 原生 addEventListener 直接添加的事件处理函数,还有使用 setTimeout/setInterval 等 React 无法掌控的 APIs情况下,就会出现同步更新 state 的情况。 2:input type=file的onchange上传文件的过程中,遇到同一个文件二次上传无效的问题; 解决方法:input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有在内容发生改变的时候去触发,而value在上传文件的时候保存的是文件的内容,所以只需要在上传成功的回调里面,将当前input的value值置空即可,需要在input的外层嵌套一层form,利用form表单的reset()来清空,而直接将value设为空是不允许的; 4/15 1:如果render() 方法依赖于一些其他数据,你可以告诉 React 组件需要通过调用 forceUpdate() 重新渲染。调用 forceUpdate() 会导致组件跳过 shouldComponentUpdate() ,直接调用 render()。 这将触发子组件的正常生命周期方法,包括每个子组件的 shouldComponentUpdate() 方法。例如有些变量不在state上,但是你又想达到这个变量更新的时候,刷新render;或者state里的某个变量层次太深,更新的时候没有自动触发render。这些时候都可以手动调用forceUpdate自动触发render; 5/5 1:ant-design getFieldDecorator 无法获取自定义组件的值可参见链接文章。 2:react的Context方法可参见链接https://www.jianshu.com/p/eba2b76b290b 5/9 1:如果想均分父级宽度作为子集的宽度可以通过如下方法:

image.png
5/17 1:antDesign的表单组件的setFieldsValue的方法是异步的,可以利用setTimeout延时执行的方法来正确获取最新设置的值。 5/31 1:warning: React does not recognize the xxx prop on a DOM element 控制台报这个错的原因是因为这是React不能识别dom元素上的非标准attribute报出的警告,最终的渲染结果中React会移除这些非标准的attribute。 通常{...this.props}和cloneElement(element, this.props)这两种写法,会将父级别无用的attribute传递到子级的dom元素上。