《react学习之道》学习记录

  • Z时代
  • 2024-01-10
  • 分类：综合

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

回到顶部