React学习第三步--元素渲染与组件运用

最新推荐文章于 2022-06-27 11:59:26 发布

Daisy_____

最新推荐文章于 2022-06-27 11:59:26 发布

阅读量277

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/Daisy__xu/article/details/89306883

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本篇文章主要围绕React组件封装、数据传递以及渲染DOM展开，并通过实际操作来实现组件的封装。首先在开始本篇文章之前，我们得大致对React有一定了解。

React官方中文文档地址：https://react.docschina.org

React主要的一大特色：组件化，通过创建好拥有各自状态的组件，再由组件构成更加复杂的界面，了解React基础知识的小伙伴应该知道，React框架采取的是虚拟的DOM，在呈现实际的Web页面之前，首先编写出DOM元素，在确定了要显示的内容和显示方式后，再将HTML页面渲染出来。

首先了解一下React渲染界面的方式：

上面代码在界面渲染了一个展示字样为Hello, world!的h1标签， const element = <h1>Hello, world!</h1>;这种语法被称为 JSX，一种 JavaScript 的语法扩展。

在 React 中使用 JSX 来描述用户界面。JSX基本支持js中所有的方式，详细可参考https://react.docschina.org/docs/introducing-jsx.html

在index.html中我们会发现有一行代码<div id="root"></div>，这个元素将其称之为 “根” DOM 节点。

注：一个React项目只会定义一个根节点。

定义好元素，通过ReactDOM.render(element, document.getElementById('root'));就将需要显示的内容渲染在界面上了。

了解了元素渲染之后，就需要理解组件以及组件“Props”和“State”的用法。通俗的说state是组件内部的变量且只能在组件内部声明和使用，props是父组件传值给子组件所用的值，值得注意的是只能父组件传值给子组件，这一过程是不可逆的。

接下来，我们以实例的方式来讲解对应的用法，首先我们在上一节有讲过搭建项目的过程，请参考：https://blog.csdn.net/Daisy__xu/article/details/88836790

我们打开项目，删除掉src中的全部文件，然后我们建立自己的index.js文件，这个文件是项目的主要文件，其他文件都依赖于此文件进行。

index.js，内容如下：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>Hello World！</div>, 
  document.getElementById('root')
)

其中引入的react， react-dom都是React框架的基础依赖，ReactDOM提供渲染函数将所要展示内容渲染出来。

在命令行中输入 npm start，就能在界面中看到Hello World！字样了。到此我们就能大致明白React渲染数据的一个过程了。那么组件该如何去写，又如何使用呢？

下面我们创建一个Welcome.js，内容如下：

import React from 'react';
// 函数形式
function Welcome() {
  return <h1> Hello World！</h1>;
}

// 类方式
// class Welcome extends React.Component {
//   render(){
//     return(<div>Hello World！</div>)
//   }
// }

export default Welcome;

我们创建了一个内容为Hello World！的组件，并命名它为Welcome，export default Welcome导出组件可供外部使用。

我们修改index.js内容：

import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome';

ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
)

保存之后 localhost:3000界面中仍然可以看到Hello World！字样，这样我们就完成了一个组件的创建了。

下面我们就来讲解“props”和“state”的用法。

state:

import React from 'react';

class Welcome extends React.Component {
  constructor(props) { //构造函数
    super(props);
    this.state = {
      text: 'Hello World！'
    }
  }
  render() {
    let text = this.state.text;
    return (<div text={text} ></div>)
  }
}
export default Welcome;

修改Welcome.js文件内容：

this.state = { text: 'Hello World！' }为state的初始化方式，当组件被加载时state的text内容就被渲染到div里面返回给外部组件使用了。详细介绍请参考React文档，地址https://react.docschina.org/docs/state-and-lifecycle.html

props：

在讲props还需创建一个组件，因为props是父子组件之间传递数据时使用。

import React from 'react';

class View extends React.Component {
    constructor(props) { //构造函数
        super(props);
        this.state = {}
    }

    render(){
        return(<div>{this.props.text}</div>)
    }
}

export default View;

建这个View作为子组件，将父组件传递的内容展示在该组件里。

同时我们需要修改Welcome.js内容：

import React from 'react';
import View from './View';

class Welcome extends React.Component {
  constructor(props) { //构造函数
    super(props);
    this.state = {
      text: 'Hello World！'
    }
  }
  render() {
    let text = this.state.text;
    return (<View text={text} />)
  }
}
export default Welcome;

运行之后虽然结果没有改变，但是获取值的方式已经变为View组件显示从父组件的props中的text，一个是state，一个是props。

到这里关于React渲染和组件创建以及传值方式大致介绍完成了。