React学习笔记-基础语法

由于ng写的枯燥无味，所以便趁着晚上无聊时间学习react，卷死你们！

此笔记是记录学习react的第一篇文章，主要学到了创建react组件的方式、jsx的基础语法以及react中的this指向问题。

创建react组件的方式

有两种方式可以创建组件：函数式组件和类组件。如下：

// 函数式
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 类组件
class Welcom extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

在不考虑hooks之前，类组件就是比函数组件多了state（状态）功能，适合复杂功能，当然hooks就等以后学到再说吧。

JSX

在react中使用jsx来构建界面，最终由babel编译器转为普通的js代码。

JSX全称是JavaScript XML 是对JavaScript的一种扩展。下面是几种语法：

1. 定义虚拟dom时，不要写引号。

2. 标签中混入js表达式时要用{}。

3. 样式的类名不要用class，要换成className。

4. 内联样式，要用{{key: value}}的形式去写。

5. 只能有一个根标签，且标签必须闭合。

6. 标签首字母：如果是大写，则babel会以组件去解析，否则会以HTML标签去解析。

7. 点击事件要写成 onClick={this.handleClick}的形式，onClick驼峰写法。

react中的this指向问题

先看一下代码：

class App extends Component{
  constructor() {
    super();
    this.state = {frameWork: ['Angular','React','Vue']};
  }
  render() {
   return (
       <div className={'main'}>
           <span style={{fontSize:'25px',fontWeight: 'bold'}}>前端三大框架</span>
           <ul>
               {this.state.frameWork.map((item,index) =>
                   (<li key={index} className={'list'} onClick={this.handleClick}>{item}</li>))}
           </ul>
       </div>
   )
  }
  handleClick() {
  // 此处打印的this会是undefined！
    console.log(this);
  }
}

这里打印的this的undefined的原因如下：

1. 在react中的点击事件并不是由组件类的实例直接调用的，而是由window调用的，上面的代码中的onClick是一个赋值语句，并没有运行handleClick方法，而是由window调用的，相当于 window.handleClick()

2. handleClick方法是类中的实例方法，在类的实例方法内部会默认启用’ use strict '严格模式，在严格模式下，方法内部的this就变成了undefined。

知道了原因以后解决方法如下：

1. 利用bind方法，显示的改变this指向。在construct构造方法中加入：

// 这里的this指的是组件类的实例对象
this.handleClick = this.handleClick.bind(this);

2. 利用ES6的箭头函数，箭头函数中是没有this的，内部的this是指它上一层的作用域中的this。

// 把函数改造成箭头函数
 handleClick = () => {
   console.log(this);
 }

总结

总结一下用到的js的知识点：

1. 原型与原型链（类的继承）

2. this的指向问题（箭头函数中的this）

3. js中的严格模式

4. 显式改变this的指向的方法（bind、call、apply的区别）

以上。由于笔者水平有限，若有错误敬请指正，欢迎评论区留言交流~