React Tutorial

By /

为什么要学习React？换句话说，为什么原生js不够好呢？

  • 原生JS操作DOM繁琐，效率低（DOM-API操作UI）
  • 原生JS直接操作DOM，浏览器会进行大量的重绘重排
  • 原生JS没有组件化编码方案，代码复用率低

虚拟DOM

  • 本质是Object类型的对象（一般对象）
  • 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
  • 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

JSX语法规则

  1. 定义虚拟DOM时，不要写引号。
  2. 标签内混入JS表达式时要用{}。
  3. 样式的类名指定不要用class，要用className。
  4. 内联样式，要用style={{key:value}}的形式去写。
  5. 只有一个根标签。
  6. 标签必须闭合。
  7. 标签首字母：
    • 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
    • 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

JS复习

  • JS类里定义的方法定义在哪里了呢？类的原型对象上（__proto__里），供实例使用。通过实例调用方法里的this，this指向的就是类的实例对象。
  • 如何判断this是谁？那取决于this是怎么调用的。

组件

  • 组件可以通过函数声明的方式创建，也可以通过类式组件创建。
  • 创建类式组件的时候，一定要extend React.Component
class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h2>This is my component.</h2>
      </div>
    )
  }
}

状态和展示

  • 组件的状态里存着数据，数据的改变就会驱动页面的展示。

类中的方法this指向

  • 类中所有定义的方法都在局部开启了严格模式，所以const x = p1.study的话，调用x()，里面的this是undefined而不是window

现在的问题是当h1标签被click，调用回调函数changeWeather时，函数里的this为undefined，那该怎么办呢？

状态不可直接更改，需要调用setState({…})来更改，且更新是一种合并，不是替换。也就是说，同名的就替换了，不同名的保留。

如果不想写的这么麻烦，那可以用这种写法，完美解决this的问题

总结一下，state如果不依赖传参进来，直接写到class体内，然后方法也写成property的形式，并用箭头函数给其赋值。

对props进行限制：

组件的生命周期（旧版）

组件的生命周期（新版）

其实不管是新的生命周期还是旧的，常用的就3个：

  • render: 初始化渲染或更新渲染调用
  • componentDidMount：开启监听，发送ajax请求
  • componentWillUnmount: 做一些收尾工作，如：清理定时器

三个废弃的钩子：

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

连续解构赋值加重命名：

Scroll to Top