React 基础

2024-07-03 16:54| 来源: 网络整理| 查看: 265

由于 RN 环境过于麻烦，所以这里先尝试 React，有不对的还望不吝赐教

React 安装请查看官网

渲染 JSX

React 的模板语法是 JSX，看起来很像是 JS+HTML 的混血儿。具体的语法这里就不再赘述，想了解的话，http://www.runoob.com/react/react-jsx.html，https://hulufei.gitbooks.io/react-tutorial/jsx-in-depth.html

在 React 中可以通过如下方式渲染 html 元素

ReaderDOM.render(dom,element) 方法来渲染代码如下：

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( Hello React, document.getElementById('root') );

其中 root是index.html 中的根标签的 id

效果如下

hello

可以看到我们写的 Hello React被成功渲染（具体渲染逻辑本篇不分析），那么如果html元素很多，我们是要全部写到这个方法里面吗？请往下看

但是需要注意：

由于文件仍然是 js 所以考虑到与 js 中关键字的冲突部分名称会变化，比如html 中标签的 class在 JSX 中为 className，for要写成 htmlFor自定义属性需要使用 data- 前缀或者 aria- 前缀JSX 语法需要只有一个最外层元素，比如

......

、但是如果写成: import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( Hello React I'm from renderDom., document.getElementById('root') );

会报错误在这里插入图片描述需要修改成：

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( Hello React I'm from renderDom. , document.getElementById('root') );

这样才能正确渲染在这里插入图片描述

更多待发现

你也可以不用 JSX 语法，代码如下：

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( React.createElement( "div",null, React.createElement("h3",null,"Hello React"), React.createElement("p",null,"I'm from createElement.") ), document.getElementById('root') );

效果是一致的,但是可以明显看出来会比 JSX 语法复杂很多，具体用法请看，createElements

组件

React 中的组件，也是同样的 JSX 语法，并且支持 class 直接作为 JSX 中 html 标签来使用，那么这样就可以解决复杂dom 结构渲染的问题，我们可以把复杂的dom 拆分成不同的组件。

那么组件怎么使用？很简单，我们只需要新建一个继承 React.Component 的 class 并且实现 render() 方法，在 render() 方法中返回我们想要渲染的结构，然后再在使用的地方直接向使用一个普通的 html 标签一样就可以了，代码如下：

import React from 'react'; import ReactDOM from 'react-dom'; class HelloReact extends React.Component { render(){ return ( Hello React I'm from HelloReact component. ); } } // ======================================== ReactDOM.render( ,//注意这里必须要与前面定义的（或者引用的） class 类名完全一致 document.getElementById('root') );

效果如下：

在这里插入图片描述

如果我这个组件的定义是在另外的文件里面呢？也很简单，直接引入你定义的文件就可以了。

如，Hello.js 文件中

import React from 'react'; class HelloReact extends React.Component { render(){ return ( Hello React I'm from Hello.js. ); } } export default HelloReact;//导出

在 index.js 中，添加对 Hello.js 的引用：

import React from 'react'; import ReactDOM from 'react-dom'; import HelloReact from './Hello.js'; // ======================================== ReactDOM.render( ,//注意这里必须要与前面定义的（或者引用的） class 类名完全一致 document.getElementById('root') );

效果如下：

在这里插入图片描述

组件间交互

前面了解了组件的大概使用，但是我们的数据都是写死的，怎么能够让他动态起来呢？就会涉及到组件间的数据交互了，

子组件数据传递

组件间的数据是通过 props 传递，使用的时候可以直接通过标签的属性传递，组件中通过 this.props.属性名直接访问，但是如果需要在 html 中使用则需要被 {} 包含，

我们来改造一下 Hello.js，最终代码如下(注意这里我们并没有对 name 进行初始化)：

import React from 'react'; class HelloReact extends React.Component { render(){ return ( Hello {this.props.name},I'm React. I'm from Hello.js. ); } } export default HelloReact;

这时候访问（这里我们没有初始化 name 但是没有报错只是为空而已，这里应该是 react 给我们处理了）：

在这里插入图片描述

再来改造 index.js,添加上 name="Alvin"

下面再刷新页面（数据成功传递）：

在这里插入图片描述

不过我们这里使用的是修改 props属性，修改这个属性并不好（因为我们可能并不知道组件有哪些属性），而且这种方式也不利于我们传递复杂参数

如果是需要传递复杂参数，这里我们可以用JSX 的一个新的特性（扩散属性，文档）

我们可以对index.js 进行再加工，添加上扩散属性（… 在这里就是表征这是一个展开属性）

import React from 'react'; import ReactDOM from 'react-dom'; import HelloReact from './Hello.js'; // ======================================== var props = {}; props.name = "Alvin"; props.sex = "male"; props.mail = "[email protected]"; ReactDOM.render( render(){ return ( Hello {this.props.name},I'm React. I'm from Hello.js. Your email is {this.props.mail}. Your are {this.props.sex}. ); } } export default HelloReact;

页面刷新，

子组件的事件交互以及子组件给父组件的消息传递，下篇分解

【本文地址】

公司简介

联系我们