React 入门 03 - 元素与组件

Posted 2022-06-21 逆風的薔薇

前言

从 React 入门 02 - JSX 学习了JSX的基本用法，本文我们开始深入探讨React 元素与组件。

React 元素

元素是构成React引用的最小砖块，描述了你在屏幕上想看到的内容。与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

ReactDOM.render(...) 即用来将一个React元素渲染到html的DOM根元素。

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。React 进行元素更新时会自动将当前元素及其子元素与之前的状态进行比较，从而只更新改变的地方。

function tick() 
    const element = (
        <div>
            <h1> Hello, React!</h1>
            <h2> It is new Date().toLocaleString() </h2>
        </div>
    );

    ReactDOM.render(
        element,
        document.getElementById('root')
    );


// 使用定时器，定时调用方法tick，刷新元素element
setInterval(tick, 1000);

element.html Git Hub 🔗 

React 组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

React 组件，从概念上类似于 javascript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。常用定义方法为函数组件和class组件。

函数组件与 class 组件

// 定义函数组件Welcome, 接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素
function Welcome(pros) 
    return <h1> Hello, pros.name </h1>;


// class 组件
class Hello extends React.Component 
    render() 
        return <h1> Hello, this.pros.name </h1>
    

注意： 组件名称必须以大写字母开头。

React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。

 

渲染组件

然后即可使用自定义组件声明React 元素并渲染。

// 使用React自定义组件 声明元素 渲染组件
const element =  <div> 
        <Welcome name='Ria'/>
        <Hello name='Ming' />
    </div>;

ReactDOM.render(
    element,
    document.getElementById('root')
);

 component.html Git Hub 🔗

组合组件

组件可以在其输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。

如下例子所示，Welcome是一个函数组件，Hello是一个class组件。我们组合这两个组件定义出另一个函数组件 App 并渲染到html页面。

// 定义函数组件Welcome, 接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素
function Welcome(props) 
    return <h1> Hello, props.name! </h1>;


// class 组件
class Hello extends React.Component 
    render() 
        return <h1> Hello, this.props.name! </h1>
    


// 定义一个组合组件
function App() 
    return (
        <div>
            <Welcome name = 'Ria' />
            <Hello name = 'Ming' />
        </div>
    );


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

composite.html Git Hub 🔗

Props 的只读性

React 组件的props属性是只读的，无论是函数组件还是class组件都不能修改其props。 

参考资源

https://zh-hans.reactjs.org/docs/rendering-elements.html

https://www.ruanyifeng.com/blog/2015/03/react.html