3月第一周遇到的一些问题和思考

没事问题不大

2020-03-08 81 阅读1分钟

问题

场景：使用<input type="file">时，传同一文件时不会触发onChange事件。

原因：input 标签上传文件后会保存文件的路径在 value 里，同一文件内容修改但路径不变，上传时发现路径未变化不会触发 onChange 事件

解决：在触发click事件时将 value 置为默认值
场景：代码中使用 try catch 抛出 error 的形式中断 forEach 循环（满足条件时），感觉不合理

解决：修改为使用 some 方法，当满足条件时 return true 终止。发现 Array 除了 forEach, map, reduce 外还有一些好用的方法。

思考

关于 react 组件的思考，之前只知道该怎么用，不知道为什么这么用
```
class Comp extends React.Component {
    constructor(props) {
        super(props)
    }
}
```
以上代码这是一种常见的声明组件的形式，声明了一个继承了 React.Component 的 Comp 类。使用 jsx 调用组件传入一些参数其实就相当于创建了一个 Comp 类的实例。
```
<Comp text={text} name={name} />
```
相当于
```
new Comp({ text: text, name: name })
```
在构造函数中先执行 super(props) 调用父类的构造函数，使得 React.Component 可以初始化 this.props 的值，然后构造函数中便可以使用 this.props 的值。

如果只执行 super() ，不传入 props，在其他地方依然可以访问到 this.props。这是因为执行完构造函数后 react 还是会把 props 赋在实例上。但是在构造函数执行的过程中，this.props 会是 undefined 。
```
class Comp extends React.Component {
    constructor(props) {
        super()
        console.log(this.props) // undefined
    }
}
```
如有不对的地方欢迎指正！