React采坑专区

傷城~ 2023-03-12 09:30 121阅读 0赞

## React采坑专区 ##

> 1.  this指向问题
> 
>     <button onClick={ this.addList}>增加</button>
>     
>     // 增加
>     addList() { 
>       console.log(this)
>      //=>结果是 undefined ，而且控制台报错！！！
>     }
> 
> 解决方法：
> 
>  *  方法一：使用bind函数改变this指向
> 
>     constructor(props) { 
>      super(props);
>      this.addList = this.addList.bind(this)
>     }
>     
>     <button onClick={ this.addList}>增加</button>
>     
>     // 增加
>     addList() { 
>         console.log(this)
>        //=>结果是 class 对应的实例对象
>     }
> 
>  *  方法二：使用箭头函数
> 
>     <button onClick={ this.addList}>增加</button>
>     
>     // 增加
>     addList=()=> { 
>         console.log(this)
>        //=>结果是 class 对应的实例对象
>     }
> 
>  *  方法三：箭头函数
> 
>     <button onClick={ () => this.handleClick(1)}>增加</button>
>     
>     // 写法1：
>     handleClick = (index) => { 
>     console.log(this)
>     console.log(index)
>     this.setState({ 
>     	count: this.state.count + 1
>     })
>     }
>     
>     // 写法2：
>     handleClick(index) { 
>     console.log(this)
>     console.log(index)
>     this.setState({ 
>     	count: this.state.count + 1
>     })
>     }
> 
> 1.  注释写法：推荐使用单行注释 \{/\* 内容区 \*/\}；快捷键 `ctrl + /`
> 
> 使用区域：
> 
>     render(){ 
>     	return (
>     		 { /* 内容区 */}
>     	)
>     }
> 
> 1.  点击label标签，自动定位光标到input输入框
> 
>     <label htmlFor="pink"></label>
>     <input id="pink"></input>
> 
> 1.  React的重要特性：单项数据流
> 
> 父组件向子组件传值，数据是只读的，子组件不可以改变传递的数据；
> 
> 解决方法：
> 
>  *  方法一：父组件将方法传递给子组件，然后子组件用传递的方法，改变父组件的数据！！！
> 
> 1.  函数式编程
>     
>      *  代码清晰
>      *  方便前端自动化测试
> 2.  ref采坑
> 
> 点击添加会自动加入一项
> 
>     <button onClick={ this.addList}>增加</button>
>     
>     <ul ref={ (ul) => {  this.ul = ul }}>
>     	<li>内容</li>
>     </ul>
>     
>     // 增加
>     addList() { 
>       console.log(this)
>       this.setState({ 
>           list: [...this.state.list, this.state.inputValue],
>           inputValue: ''
>       })
>       console.log(this.ul.querySelectorAll('li').length)
>     }
>     
>     //=>结果：打印的结果总是比实际情况少一个；原因：this.setState是异步加载的
> 
> 解决方法：将代码放在 `this.setState`的回调函数中
> 
>     // 增加
>     addList() { 
>       console.log(this)
>       this.setState({ 
>           list: [...this.state.list, this.state.inputValue],
>           inputValue: ''
>       },()=>{ 
>       	console.log(this.ul.querySelectorAll('li').length)
>       })
>     }