React入门教程

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

react

转载： https://blog.csdn.net/Bupt_Lili/article/details/78027082

  • 1. React的起源

  • 2. React的特点

    • 2.1 虚拟DOM

    • 2.2 组件化思想

    • 2.3 JSX语法

  • 3. 创建第一个React项目

    • 3.1 环境要求

    • 3.2 创建一个可执行的React项目

  • 4. 增加一个React组件

  • 5. React数据流

    • 5.1 组件间通信：props

    • 5.2 组件内部状态：state

  • 6. 组件的生命周期

    • 6.1 装载过程

    • 6.2 更新过程

    • 6.3 卸载过程

1. React的起源

  React最初来自Facebook内部的广告系统项目，项目实施过程中前端开发遇到了巨大挑战，代码变得越来越臃肿且混乱不堪，难以维护。于是痛定思痛，他们决定抛开很多所谓的“最佳实践”，重新思考前端界面的构建方式，于是就有了React。

  前端开发的本质问题：如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。

  React官网描述其出发点为：用于开发数据不断变化的大型应用程序。

2. React的特点

2.1 虚拟DOM

  Web开发中，将变化的数据实时反映到UI上，就需要对DOM进行操作。而DOM操作的性能消耗非常大，复杂或频繁的DOM操作通常是性能瓶颈产生的原因，且会让代码变得难以维护。

  React把真实的DOM树转换成JavaScript对象树，也就是Virtual DOM。每次数据更新后，重新计算Virtual DOM，并与上一次生成的Virtual DOM做对比，只对变化的部分做批量更新，从而提升性能。

  同时，开发者将不再需要关注某个数据的变化是如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下整个界面是如何render的。

传统方式造成的纠缠代码结构：

React的程序流程：

2.2 组件化思想

  React推荐开发者从功能的角度出发，以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。

2.3 JSX语法

  JSX的官方定义是类XML语法的ECMAScript扩展。

  JSX将HTML语法加入到JavaScript代码中，再通过编译转换成纯JavaScript后由浏览器执行。在实际开发中，JSX在产品打包阶段就已经编译成纯JavaScript，采用Bable的JSX编译器实现。JSX让代码更易于阅读和开发，并易于维护。可以在JavaScript 的代码直接中使用 HTML 标签来编写 JavaScript 对象。

 

  1. return (

  2. <div className="col-sm-12">

  3. <div className="col-sm-3">

  4. <ClassifySelect

  5. subjects={subjects}

  6. resources={resources}

  7. objects={objects}

  8. submitFunc={this.classifySelectSubmit.bind(this)}

  9. />

  10. </div>

3. 创建第一个React项目

3.1 环境要求

  1. 安装VSCode、Chrome；

  2. 安装和配置Node。（Node中自带npm包管理工具，不必单独安装npm）

   官网下载：https://nodejs.org/

   安装配置教程：http://www.cnblogs.com/yzadd/p/6547668.html

3.2 创建一个可执行的React项目

  • Step1：create-react-app是一个快速开发React的工具，能自动完成React的基本配置，命令行执行如下命令安装create-react-app：

      npm install --global create-react-app

  • Step2：在项目路径下执行命令：create-react-app first_react_app

     该命令会在当前路径下创建一个名为first_react_app的目录。

  • Step3：在一大段文字输出之后，执行如下命令：

      cd first_react_app

      npm start （该命令会启动本地服务器，同时在浏览器中自动打开一个网页，指向本机地址 http://localhost：3000/ ）

   恭喜！你的第一个React应用诞生了！

4. 增加一个React组件

  • Step1：在src目录下新建代码文件ClickCounter.js，定义一个能够计算点击数的ClickCounter组件，代码如下：

 

  1. import React, { Component } from 'react';

  2. class ClickCounter extends Component {

  3. constructor(props) {

  4. super(props);

  5. this.state = {

  6. count: 0

  7. };

  8. }

  9. onClickButton() {

  10. this.setState({

  11. count: this.state.count + 1

  12. });

  13. }

  14. render() {

  15. return (

  16. <div>

  17. <button onClick={this.onClickButton.bind(this)}>Click Me</button>

  18. <div>

  19. Click Count: {this.state.count}

  20. </div>

  21. </div>

  22. );

  23. }

  24. }

  25. export default ClickCounter;

  • Step2：修改index.js文件中相关的部分。

 

  1. import ClickCounter from './ClickCounter';

  2. ReactDOM.render(

  3. <ClickCounter />,document.getElementById('root')

  4. );

  • Step3：保存修改后页面会自动刷新。

  恭喜！你已经构建了一个可以交互的组件!

5. React数据流

5.1 组件间通信：props

   每个组件都有props，用于与父组件之间的通信，是从外部传递给组件的数据。用this.props.[propsName]获取，在constructor函数中可通过props.[propsName]获取。props的值不能在组件内部被改变。

  • propTypes检查

    ES6中通过给组件类的propTypes属性赋值来定义props规范，包括：

    • 该组件支持哪些prop；

    • 每个prop应该是什么数据类型；

    • 每个prop是否是必需的。

 

  1. Counter.propTypes = {

  2. caption: PropTypes.string.isRequired,

  3. initValue: PropTypes.number,

  4. };

注：propTypes检查只是一个辅助开发的功能，检查出错时会给出警告，但组件依旧能工作。

  • defaultProps指定初始值

    ES6中通过给组件类的defaultProps属性赋值来定义props的初始值。

 

  1. Counter.defaultProps = { //指定默认值

  2. initValue: 0

  3. };

5.2 组件内部状态：state

  state用来对组件的内部状态进行控制，用于记录组件内部数据的变化。与props不能被改变不同，state存在的意义就是让组件来改变的。

  • 初始化state

    • 通常在组件的 constructor() 函数结尾处通过对this.state的赋值完成state的初始化。

 

  1. class ClickCounter extends Component {

  2. constructor(props) {

  3. super(props);

  4. this.state = {

  5. count: 0

  6. };

  7. }

  • 读取和更新state

    • 通过 this.state.[stateName] 读取某个state变量的当前值；

    • 通过 this.setState() 函数改变state，而不能直接去修改 this.state.[stateName] 的值。
      this.setState() 函数首先改变this.state的值然后驱动组件重新render，将变化在页面上体现出来。

 

  1. onClickButton() {

  2. this.setState({

  3. count: this.state.count + 1

  4. });

  5. }

6. 组件的生命周期

  要理解React的工作过程，就必须了解React组件的生命周期。组件的生命周期严格定义了组件在网页中被创建、更新和删除的具体过程。

  • React组件生命周期的三个阶段：

    • 装载过程（Mount）：组件第一次在DOM树中渲染的过程；

    • 更新过程（Update）：组件被重新渲染的过程；

    • 卸载过程（Unmount）：组件从DOM中删除的过程。

6.1 装载过程

  装载过程，即组件第一次被渲染时，依次调用的函数如下：

  • constructor()

    构造函数，最重要的作用是用来初始化state。

  • componentWillMount()

    在render之前被调用，是render前最后一次修改state的机会。通常将需要从后台获取数据才能呈现的部分的网络请求放在这里。

  • render()

    根据state和props来做页面渲染，唯一一个必须要实现的函数，其他的生命周期函数都有默认实现。

  • componentDidMount()

    在render之后被调用，严格来说是在页面渲染之后被调用。

6.2 更新过程

   在交互过程中，组件随用户操作改变展现的内容，当props或state被修改时，就会引发组件的更新过程。

  更新过程一次调用的生命周期函数如下：

  • componentWillReceiveProps(nextProps)

    根据新的props值（nextProps）来更新内部状态state（通过this.setState()方法）。只要父组件的render函数被调用，就会触发其中子组件的该函数。

  • shouldComponentUpdate(nextProps,nextState)

    决定组件什么时候不需要渲染，可以进一步提高React性能。该函数返回一个布尔值，告诉React库该组件在这次更新中是否要继续。若为true，则继续更新过程，调用接下来的生命周期函数。

  • componentWillUpdate(nextProps,nextState)

    若shouldComponentUpdate函数返回true，则接着调用该函数。在这个回调中，可以做一些在更新界面之前要做的事情。

  • render()

  • componentDidUpdate(nextProps,nextState)

6.3 卸载过程

  卸载过程只涉及一个函数：

  • componentWillUnmount()

    当组件要被从界面上移除的时候，就会调用该函数。在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。

以上是 React入门教程 的全部内容， 来源链接： utcz.com/z/381659.html

回到顶部