《react学习之道》学习记录

react

react中的this

react中类方法的业务逻辑写在类中但是不写在构造方法中,因此必须要在构造方法中绑定this,否则在类方法中访问this.state时,this是undefined的。

而es6的箭头函数因为可以自动获取上下文的this,因此箭头函数可以做到自动绑定。

react中的事件

传给事件处理器的内容必须是函数。

当使用 onClick={doSomething()} 时,doSomething() 函数会在浏览器打开程序时立即执行,由于监听表达式是函数执行的返回值而不再是函数,所以点击按钮时不会有任何事发生。但当使用 onClick={doSomething} 时,因为 doSomething 是一个函数,所以它会在点击按钮时执行。同样的规则也适用于在程序中使用的 onDismiss() 类方法。

然而,使用 onClick={this.onDismiss} 并不够,因为这个类方法需要接收 item.objectID 属性来识别那个将要被忽略的项,这就是为什么它需要被封装到另一个函数中来传递这个属性。这个概念在 JavaScript 中被称为高阶函数

中一个解决方案是在外部定义一个包装函数,并且只将定义的函数传递给处理程序

onClick={() => this.onDismiss(item.objectID)}

react单向数据流

组件更新数据,反馈到view上。当本地状态更新时,render()方法再次执行。

受控组件

表单元素如input,textarea,select会以原生html形式保存他们自己的状态,一旦有人从外部做了一些修改,他们就会修改内部的值,在react中这被称为不受控组件,因为他们自己处理状态。在react中要确保这些元素变为受控组件。

只需要设置输入框的属性值

现在输入框的单向数据流循环是自包含的,组件内部状态是输入框的唯一数据来源

可组合组件

props对象中有一个children属性,可将原色从上层传递到自己的组件中。这些元素对你的组件来说是未知的,但是为组件相互组合提供了可能性。

生命周期

  • construcor()构造函数,只有在组件实例化并插入到DOM中的时候才会被调用。组件实例化的过程称作组件的挂载。
  • render()组件挂载过程调用,组件更新时也调用。当组件的state或者props改变时,组件的render()都会调用。
  • 组件挂载过程执行的另外两个生命周期方法:componentWillMount() 和 componentDidMount()。构造函数(constructor)最先执行,componentWillMount() 会在render() 方法之前执行,而 componentDidMount() 在 render() 方法之后执行。

组件实例化过程有四个生命周期方法,调用顺序如下:

更新组件时的生命周期方法有五个:

组件卸载生命周期只有一个方法:componentWillUmount()

各个方法的说明:

  • constructor(props) - 它在组件初始化时被调用。在这方法中,设置初始化状态和绑定类方法。

  • componentWillMount() - 它在 render() 方法之前被调用。这就是为什么它可以用作去设置组件内部的状态,因为它不会触发组件的再次渲染。但一般来说,还是推荐在 constructor() 中去初始化状态。

  • render() - 这个生命周期方法是必须有的,它返回作为组件输出的元素。这个方法应该是一个纯函数,因此不应该在这个方法中修改组件的状态。它把属性和状态作为输入并且返回(需要渲染的)元素

  • componentDidMount() - 它仅在组件挂载后执行一次。这是发起异步请求去 API 获取数据的绝佳时期。获取到的数据将被保存在内部组件的状态中然后在 render() 生命周期方法中展示出来。

  • componentWillReceiveProps(nextProps) - 这个方法在一个更新生命周(update lifecycle)中被调用。新的属性会作为它的输入。因此你可以利用 this.props 来对比之后的属性和之前的属性,基于对比的结果去实现不同的行为。此外,你可以基于新的属性来设置组件的状态。

  • shouldComponentUpdate(nextProps, nextState) - 每次组件因为状态或者属性更改而更新时,它都会被调用。你将在成熟的React应用中使用它来进行性能优化。在一个更新生命周期中,组件及其子组件将根据该方法返回的布尔值来决定是否重新渲染。这样你可以阻止组件的渲染生命周期(render lifecycle)方法,避免不必要的渲染。

  • componentWillUpdate(nextProps, nextState) - 这个方法是 render() 执行之前的最后一个方法。你已经拥有下一个属性和状态,它们可以在这个方法中任由你处置。你可以利用这个方法在渲染之前进行最后的准备。注意在这个生命周期方法中你不能再触发 setState()。如果你想基于新的属性计算状态,你必须利用 componentWillReceiveProps()

  • componentDidUpdate(prevProps, prevState) - 这个方法在 render() 之后立即调用。你可以用它当成操作 DOM 或者执行更多异步请求的机会。

  • componentWillUnmount() - 它会在组件销毁之前被调用。你可以利用这个生命周期方法去执行任何清理任务。

条件渲染

用于需要决定渲染哪个元素时。

方法一:三元运算符

方法二:用&&运算符

在js中,true && 'Hello World' 的值永远是 “Hello World”。而 false && 'Hello World' 的值则永远是 false。

如果条件判断为true,&&操作符后面的表达式的值被输出,条件判断为false,&&会忽略并跳过后面的表达式。

以上是 《react学习之道》学习记录 的全部内容, 来源链接: utcz.com/z/383414.html

回到顶部