重学react系列（二）—— 元素渲染与组件

元素渲染

在上一篇中，我们简单的了解了怎么使用react搭建起一个项目，这次我们再进行下一步。在这之前我想先做一个处理，因为脚手架工具生成了很多我们用不到的代码，所以我这里就都去掉了，只留下我需要的两个文件（package.json暂时也用不到其实，但还是留着吧）：在这里插入图片描述

1.index.html （这里只有一个div，作为targetDom，也算是根元素了，所有元素会挂载到这个节点上，但是并不是只能有一个跟节点，只是大家有这样的一个习惯）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

2.index.js （同样引入react,react-dom,调用ReactDOM.render()将元素渲染到根节点上）

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

ReactDOM.render(
  <React.StrictMode>
  	<p>Hello React !</p>
  </React.StrictMode>,
  document.getElementById('root')
);

注意：这里React引入后貌似没调用过，其实不是的，babel后JSX语法会转换成React.createElement()，所以这里是必须引入的。

只需上面两个文件我们就能将元素渲染到界面之中。在这里插入图片描述我们再进一步，在JSX中给元素添加样式、事件、变量等；看元素是怎么样的一个表现

ReactDOM.render(
  <React.StrictMode>
    <p>Hello React !</p>
    <p style={{color:"red"}}>样式：我是红色的！</p>
    <p onClick={()=>{alert('click')}}>事件：点我！</p>
    <p>变量：{new Date().toLocaleDateString()}</p>
  </React.StrictMode>,
  document.getElementById('root')
);

JSX中的样式一般是通过style属性或者className来设置的 JSX中的事件handle和原生的不太一样是遵循驼峰规则的 JSX中写JS语句时需要用大括号包裹起来以下是运行结果：在这里插入图片描述

组件

react元素的渲染和原生的有些许不同，但是基本相似。另外react还引入组件的概念，方便对dom进行合理的分割，一来使得代码可复用，二来可以使代码更容易维护与扩展。那到底什么是组件呢？在我的理解，组件也是一个变量，这个变量里面存放的是元素的集合。举个代码例子,这里的代码是根据之前改动的，我们有三个变化： 1.新建了一个函数App，这个函数返回一个JSX对象（注意函数必须是大写字母开头） 2.App函数的引用可以使用JSX语法 <App/> 3.元素多了一个div标签进行包裹，因为每一个JSX对象必须只有一个根元素包裹在这里插入图片描述通过上述例子我们就写了一个纯函数的组件App，当我需要更改组件时，直接更改App函数即可。当然我们也可以把函数写在另外一个js中，再使用import和export来处理组件的导入导出。

比如这样：新建文件：src/components/FunComp.js

import React from 'react';

function FunComp (){
  return (
    <div>
      <p>函数组件!</p>
    </div>
  )
}

export default FunComp

在index.js导入并添加到dom中

import FunComp from './components/Counter';
......
ReactDOM.render(
  <React.StrictMode>
    <App/>
    <FunComp/>
  </React.StrictMode>,
  document.getElementById('root')
);

这样便拥有了两个不同方式引入的组件，一般提倡后者，尽量将组件按功能拆分到一个或者多个js文件中，方便管理与维护。

这里的是纯函数组件，我们还可以写一个类组件试试。

新建文件：src/components/ClassComp.js

import React from 'react';

class ClassComp extends React.PureComponent {
  render () {
    return (
      <div>
        <p>类组件！</p>
      </div>
    )
  }
}

export default ClassComp;

PureComponent与Component的区别是优化了shouldComponentUpdate，避免不必要的重复渲染。

在index.js导入

import ClassComp from './components/ClassComp';
......
ReactDOM.render(
  <React.StrictMode>
    <App/>
    <FunComp/>
    <ClassComp/>
  </React.StrictMode>,
  document.getElementById('root')
);

最后结果很圆满：在这里插入图片描述

总结

本文主要写了如何渲染元素和简单组件到页面上，这些都是比较基础的，下一篇来了解一下props。