react教程(一)JSX语法、组件概念、生命周期介绍

JSX

React中,推出了一种新的语法取名为JSX,它给了JS中写HTML标签的能力,不需要加引号。JSX的语法看起来是一种模板,然而它在编译以后,会转成JS语法,只是书写过程中的语法糖。

JSX的解析器会帮我们读取这种语法并加以处理。

下面是一个简单的例子。

const element = <h1 className="greeting">Hello, world!</h1>;

其实相当于如下的代码:

const element = React.createElement({
  ‘h1‘,
  {className: ‘greeting‘},
  ‘Hello, world!‘,
  ‘Xxx‘
})

第一个参数是类型,可以是HTML标签,也可以是React组件;第二个参数是props对象;第三个以后参数是children,会按照传入顺序依次排列。

当然第三个参数也可以传入数组,如果第三个参数传入数组,则后面再传入其他子节点,就会报错。

JSX提供了一种HTML和JS混合编写的能力。在需要使用JS表达式的地方,用一组花括号包裹起来即可:

function formatName(user) {
  return user.firstName + ‘ ‘ + user.lastName;
}

const user = {
  firstName: ‘Harper‘,
  lastName: ‘Perez‘
};

const element = (
  <h1 className="test">
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById(‘app‘)
);

由于class在js中关键字,所以使用className去替代。

上面说到了JSX其实是语法糖,所以如果要循环嵌入列表,可以直接将列表传进来:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById(‘app‘)
);

在控制台中会看到这样的报错:

warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop.

这是由于react使用virtual dom来渲染真实节点,在列表渲染时,如果每个item没有对应的key,react处理起增删改时就会很慢,所以,渲染列表时,最好给每一个item增加一个唯一的key。

const listItems = numbers.map((number, index) =>
  <li key={index}>{number}</li>
);

组件

React中最重要的概念就是组件。

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

组件可以看做是一个函数,指定了输入(props),就会给出输出(一个React元素)。

创建组件有两种方法:

1.函数

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

2.es6的类

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

第二种方法创建的组件,可以拥有内部状态(state)和生命周期函数。

如果只是展示信息,没有复杂的操作,可以选择第一种函数方法。如果组件比较复杂,并且需要在不同的时期做初始化或者销毁等工作,就要采用第二种ES6类方法。

状态(State)

State类似于props,但它是组件私有的并且完全由组件控制。

下面我们结合一个Clock类来演示State的概念。

import React, {Component} from ‘react‘;

export default class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

在这个组件里,Clock就拥有了自己的状态,而不是从外界发生传入。接下来我们增加一个定时器的功能,来引入生命周期。

import React, {Component} from ‘react‘;

export default class Clock extends Component {
  ...

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID)
  }

  tick () {
    this.setState({date: new Date()})
  }
  ...
}

注意:在React中,调用setState方法去修改state,会触发View视图层的修改,直接设置state就不会触发state的修改。

上面引入了两个生命周期方法:componentDidMount , componentWillUnmount

componentDidMount 会在组件挂载到DOM节点上之后触发,而 componentWillUnmount 会在组件从节点上移除以后触发。

React还有很多生命周期方法,下面做一个详细的说明。

生命周期

在React中,一个组件可能会经历创建、挂载、更新、卸载、销毁这些事件,React为我们提供了钩子函数来在这些事件触发时进行操作。

他的生命周期可以分为三大部分:

创建更新销毁

创建组件并将其插入DOM时,下面的方法会依次触发

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

更新时,将会触发

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

卸载时,触发

componentWillUnmount()

为了更加直观的查看生命周期方法,可以参考这张图:

图片来源:http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Render阶段,把一些state和props计算执行。

Commit阶段就是把React组件插入到真实DOM节点上,这个时候可以使用DOM。

而Pre-commit阶段就是在插入真实DOM之前,这个阶段可以读取DOM。

创建时

constructor

1.用来初始化props和state。

2.是唯一可以直接修改state的地方。

getDerivedStateFromProps

1.当state需要从props初始化时使用

2.尽量不要使用:因为维护两者的一致会增加复杂度

3.每次render前都会被调用

4.典型场景:表单控件获取默认值

render

不能缺少的,它实际上决定了组件到底要渲染成什么样子。

componentDidMount

1.在UI渲染完成之后触发

2.只执行一次

3.通常在这个方法里触发Ajax请求等操作。

更新时

有三种情况会触发update。

props发生了改变,setState执行,forceUpdate执行。

forceUpdate

前两种不多说,第三个forceUpdate触发的场景比较少见,如果Render方法使用了props和state以外的数据,就需要这个方法。

这里是一个例子

shouldComponentUpdate

1.决定virtual dom是否会重绘

2.一般可以用pure component自动实现

3.这个方法用来做性能优化相关的操作。有的时候state和props的更新其实不会影响dom的展示,没有必要再次渲染DOM。

getSnapshotBeforeUpdate

1.更新DOM前被触发,state已经更新

2.它可以将之前DOM的状态传递给componentDidUpdate,然后进行计算处理后更新DOM。

这里一个例子

componentDidUpdate

1.每次UI更新后都会调用

2.props或者state修改后都会触发

卸载时

这个阶段只会触发一个方法。

componentWillUnmount

1.只调用一次

2.可以在这个方法里清除计时器,关闭一些连接等。

以上是JSX、组件概念、props、state、生命周期的介绍。

感谢阅读。

原文地址:https://www.cnblogs.com/liuyongjia/p/9502508.html

时间: 2024-10-14 23:15:50

react教程(一)JSX语法、组件概念、生命周期介绍的相关文章

React教程:JSX语法基础

1.基本概念: React 使用 JSX 来替代常规的JavaScript. JSX 是按照 XML 语法规范 的 JavaScript 语法扩展. JSX 语法的本质:并不是直接把 JSX 渲染到页面上,而是内部先转换成了 createElement 形式,再渲染的. 2. JSX 的优点: JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化: 它是类型安全的,在编译过程中就能发现错误: 使用 JSX 编写模板更加简单快速. 3.JSX语法基础: JSX 注释:推荐使用

Android四大基本组件介绍与生命周期介绍。

Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器. 一:了解四大基本组件 Activity : 应用程序中,一个Activity通常就是一个单独的屏幕,它上面可以显示一些控件也可以监听并处理用户的事件做出响应. Activity之间通过Intent进行通信.在Intent 的描述结构中,有两个最重要的部分:动作和动作对应的数据. 典型的动作类型有:M AIN(activity的门户).V

React组件的生命周期

整个组件,从创建组件类开始,到渲染,到消亡的过程,就是组件的生命周期. 组件的生命周期可以分为三个阶段: 挂载阶段 更新阶段 卸载阶段 挂载阶段 在这个过程中,会触发以下几个事件 getDefaultProps,设置默认属性 getInitialState,设置初始状态 componentWillMount 即将挂载 render 渲染,就是挂载 componentDidMount 挂载完成 <!DOCTYPE html> <html> <head> <meta

Android React Native组件的生命周期及回调函数

熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开发中,React Native组件的生命周期,大致分为三个阶段,分别是: 1.组件第一次绘制阶段,这个阶段主要是组件的加载和初始化: 2.组件在运行和交互阶段,这个阶段组件可以处理用户交互,或者接收事件更新界面: 3.组件卸载消亡的阶段,这个阶段主要是组件的清理工作. 在Android React

Android React Native组件的生命周期

和Android一样,React的组件也有对应的生命周期.Android React Native组件的生命周期可以总的概括为下面这一张图. 可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第三阶段:是组件卸载消亡的阶段,如图中右下角的虚线框中,这里做一些组件的清理工作. 生命周期回调函数总共有10个. obje

react.js 从零开始(二)组件的生命周期

什么是生命周期? 组件本质上是一个状态机,输入确定,输出一定确定. 当状态改变的时候 会触发不同的钩子函数,可以让开发者做出响应.. 一个组件的生命周期可以概括为 初始化:状态下 可以自定义的函数 getDefaultProps object getDefaultProps() 在组件类创建的时候调用一次,然后返回值被缓存下来.如果父组件没有指定 props 中的某个键,则此处返回的对象中的相应属性将会合并到 this.props (使用 in 检测属性). 该方法在任何实例创建之前调用,因此不

React Native组件、生命周期及属性传值props详解

创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { render (){ return <Text style={{fontSize:20,backgroundColor:'red'}}>Hello</Text> } } 第二种:通过ES5的方式创建 /** * 方式二:ES5 */ var HelloComponent= React.c

React Native 中组件的生命周期(转)

概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键.RN 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第

2. React组件的生命周期

2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中React组件为我们提供了很多钩子,以便更加方便精细的控制程序. 钩子包括:componentWillMount/componentDidMount,同时在调用setState时候会触发:componentWillReceiveProps/shouldComponentUpdate/ComponentW