我们的第一个组件 Hello,React!

JS在Web端的简单应用
类比JS,React的作用
React 的组件、虚拟DOM、组件的render方法

1、一张图告诉你,JS在Web端的简单应用

JS可以通过操作DOM修改HTML文件

JS修改HTML步骤拆解:

定义“个性化”html标签
操作DOM,渲染静态文件

2、使用React更新静态文件

ps(没有印象的同学可以先参考文章:初识React)

提到React,你能想到哪些关键词呢?博主会立马联想到“组件”、“虚拟DOM”、JSX

2.1 组件

第一个组件将会用到3个库,React、React DOM 和prop-types
React DOM 是React渲染器,它从React主库分离处理便于更好地分离关注点.它将组建渲染为DOM或者处理为服务器渲染的字符串.
prop-types库是一个开发库,它可以帮你对传递给组件的的数据做类型检查

2.1.1 组件的格式:

//导入React核心包
import React, { Component } from 'react'
// 声明一个组件,需要继承Component
class MyComponent extends Component{
 // 组件都带有render方法,通过render方法返回react元素
 render(){
  <span> OKEX 今日上市!</span>
 }
}

2.2 虚拟DOM

通过调用React DOM的render方法让需要渲染的组件更新至DOM文件
React DOM需要一个ReactElement类型的元素和一个DOM元素

调用方法:

// 导入ReactDOM包
import ReactDOM from 'react-dom'

// 获取“百度搜索头条html标签”
var baidu = document.getElementsByClassName("title-content-title")[0];

// 渲染dom
ReactDOM.render(React.createElement(MyComponent),baidu);

难怪大家都介绍React时说:React是构建用户界面的JavaScript库

3、React组件都有render方法,

render方法需要只返回一个React元素.

所以就引入了React元素的概念

定义: React元素是React 中轻量、无状态、不可变的基础类型.
React 元素有ReactComponentElement和ReactDOMElement两种类型.
ReactDOMElement是DOM元素的虚拟表示.
ReactComponentElement引用了对应着React组件的一个函数或类.

3.1 React 元素与React联系
3.1.1可视化React元素和DOM元素之间的相似之处

image.png

3.1.2 另一种思考方式是将React元素当作是提供给React使用的一套基础指令:

image.png

React元素的格式:

React.createElement(
 String/ReactClass type, //可以是html的元素标签的字符串(“div”,“span”)或者React 类
  [ Object props],// 指定html元素上定义了哪些属性,或组件实例可以使用的属性
  [children...]// 子元素集合,(组件可以相互组合,可以嵌套、排序)
  )

详细可以参考React实战

当我们创建一个如下图的react元素

image.png

代码:

import React, { Component } from "react";
import { render } from "react-dom";
const node = document.getElementById("root");

class MyComponent extends Component {
  render() {

      return React.createElement(
          "div",
          {},
          React.createElement(
              "h1",
              {},
              "Hello, world!",
              React.createElement(
                  "a",
                  { href: "mailto:mark@ifelse.io" },
                  React.createElement("h1", {}, "React In Action"),
                  React.createElement("em", {}, "...and now it really is!")
              )
          )
      );
  }
}

render(React.createElement(MyComponent), node);

循环嵌套导致我们阅读下来非常困难
3.2 用JSX实现上面的DOM结构

import React, { Component } from "react";
import { render } from "react-dom";
const node = document.getElementById("root");

class MyComponent extends Component {
  render() {
    return <div>
         Hello, world!
         <a href="mailto:mark@ifelse.io">
           <h1>React In Action</h1>
           <em>...and now it really is!</em>
         </a>
       </div>;
  }
}

render(React.createElement(MyComponent), node);

我们已经创建了第一个React动态组件,将部分代码全部嵌套React.creatElement难以阅读,所以我们使用简单创建组件的方法

参考文章:初识React

下一节我们讲解JSX语法