react从入门到精通总结

Posted 2021-08-26 老张在线敲代码

事件

1. React事件处理采用的是小驼峰命名法，而不是小写

2. React使用 JSX 语法时你需要传入一个函数作为事件处理函数

//jsx
<button onClick={{this.onFn>
 11111
</button>

js中的函数方法直接写一个字符串作为事件处理函数。

//js
<button onclick="onFn()">
  qqqq
</button>

但是react直接调用onClick={this.onFn}会有this指向问题

此时在事件中打印this会发现this是undefined

解决this指向问题的三种方法：

1. 函数直接以箭头函数形式

//使用箭头函数方法时箭头函数中的this指向的是当前组件的实例对象
 onFn = () => {
 console.log(11)console.log(11)
  };

2. 在construector中通过bind方法绑定this

applly跟call方法也可以改变this指向但是不适用于这里，因为他俩都是自执行的，也就是说函数不触发就会执行函数

this.onFn= this.onFn.bind(this)

3. 在标签上直接箭头函数调用（此方法可传参）

onClick={() => {this.onFn("text");   }}

阻止默认事件/阻止冒泡/事件

首先react中是不支持直接return false的，所以我们不能通过return false来实现阻止默认行为

在react只能通过e.preventDefault()来阻止

 onA(e) {
    e.preventDefault(); //阻止默认事件
    console.log("打印a");
  }

阻止冒泡e.stopPropagation();同上

e.currentTarget：绑定事件的dom

e.target：触发事件的dom
.
.

React-Router

path属性

Route组件的path属性指定路由的匹配规则

Redirect 组件

redirect输入一个不存在的地址时候返回设置的默认页

exact属性

精准匹配，有俩个值，true或false，true为严格匹配，false为正常匹配

NavLink标签跳转

NavLink使用时会产生一个active的类名可以用于进行高亮或当前样式的显示
Link则跟html中的a标签跳转功能类似，相当于react中的a标签href跳转