likes
comments
collection
share

React入门：从入口文件到组件化的奥秘

作者站长头像
站长
· 阅读数 17

在前端开发领域，React和Vue的出现，标志着前端开发者可以“Say goodbye to DOM coding”，即不必再直接与DOM元素频繁互动，他们引领着我们告别传统的DOM操作时代，迈入MVVM（Model-View-ViewModel）模式的崭新天地。

React入门：从入口文件到组件化的奥秘

通过上一篇文章 [初识React框架](https://juejin.cn/post/7385752495534522383)，我们能知道React是一个由Facebook开发并维护的开源JavaScript库，并以其高效、灵活的组件化思想，成为了构建用户界面的首选工具之一。它通过采用组件化的方式来组织代码，使得复杂的UI结构变得易于管理和维护。本文将从一个简单的React项目入口文件`index.js`出发，逐步揭开React的神秘面纱，探索其核心概念与机制，直至深入组件化的精髓。

一、React入门

我们来到React项目入口文件index.js中，这是React应用的起点。

import ReactDOM from 'react-dom/client';
const root=ReactDOM.createRoot(
  document.getElementById('root')
);
 root.render(<h1>征程</h1>)

通过import ReactDOM from 'react-dom/client';引入了React的DOM渲染库，而ReactDOM.createRoot()方法则标志着React接管DOM的第一步。这个方法接收一个DOM元素作为参数（如document.getElementById('root')），为React创建了一个挂载点。从这一刻起，React将独立管理这部分DOM，也就是这里将成为React展示的舞台，根节点root 内部就是react的世界了，此后的所有React组件将在这个根节点下进行渲染。root.render()方法接收一个React元素作为参数，并将其渲染到与root关联的DOM节点上。

二、JSX：让JavaScript拥抱HTML

在React的世界里，JSX是最具特色的语法糖。通过允许在JavaScript中直接编写类似HTML的代码，极大地提升了代码的可读性和编写效率。

import ReactDOM from 'react-dom/client';
import React from 'react';
const root=ReactDOM.createRoot(
  document.getElementById('root')
);
// react 的法宝 ： JSX语法 
const element1 = (<h1>正大会</h1>)
const element2 =React.createElement('div',{id:'name'},'正小会')
// root.render(element1)
root.render(element2)

<h1>正大会</h1>这样的JSX表达式，不仅直观地描述了UI结构，而且与React.createElement()相比，更加简洁明了。JSX背后，是编译器将其转换为React元素（如React.createElement('h1', null, '正大会')）的过程，从而确保了JavaScript引擎的正常解析执行。也就是说明，在react中我们只要运用JSX，就可以在JavaScript直接编写HTML。

三、职责分离

React鼓励我们以函数或类的形式定义组件，每个组件负责渲染一块UI，这种设计模式大大促进了代码的复用和维护。

import ReactDOM from 'react-dom/client';
import React from 'react';
// module 模块化的导入
import APP from './app/app';
const root =ReactDOM.createRoot(
  // 就做这一次DOM查找，ReactDOM来做查找
  // DOM编程 性能很差
  document.getElementById('root')
)
root.render(<APP/>)

将index.js就用于生成一个root节点，而其他的东西就交给其他的组件APP，但是要注意的是，root.render()接受的是一个参数，所以根组件里必须返回一个值。

// 根组件
// react 使用函数创建一个组件，一定要返回JSX
// 页面由组件组成（更利于复用）
const APP = ()=>{
    const element = (
        <div className='container'>
            <h1> classname='title'>周老板</h1>
        </div>
    )
    return element
}
// module 模块化的输出
export default APP

通过定义const APP = ()=>{...}这样的函数创建一个组件，而在组件中我们可以写一堆的HTML、css、js，而页面将由组件组成，更利于复用。而组件内部可以继续嵌套其他组件（AppHeader组件），如<AppHeader />，形成了一个组件树结构，这便是React应用的核心架构。

import AppHeader from './components/app-header';
const APP = ()=>{
    const element = (
        <div className='container'>
            <AppHeader/>
            <AppHeader />
        </div>
    )
    return element
}
export default APP

四、组件化

组件化是React的灵魂。它允许我们将界面拆分成多个独立、可复用的部分，每个部分都有自己的状态和生命周期。

const AppHeader = (props)=>{
    const {name}= props;
    return (
        <div className="app-header">
            <h1 className="title">{name}</h1>
        </div>
    )
}
export default AppHeader

AppHeader组件是可以传入参数的，别忘了他是由函数来创建的。通过属性(props)传递数据（如name），这样就可以获取调用AppHeader的那个组件中的name值，更加利于复用。

import AppHeader from './components/app-header';
const APP = ()=>{
    const element = (
        <div className='container'>
            <AppHeader name='吴彦祖'/>
            <AppHeader name='彭于晏'/>
        </div>
    )
    return element
}
export default APP

组件之间可以进行通信，同时保持各自的纯净性，降低了耦合度。组件化不仅提高了代码的组织性和可测试性，也为大规模应用的开发提供了有力支撑。

结语

React不仅仅是一个库，它代表了一种全新的前端开发范式。通过ReactDOM.createRoot与JSX的巧妙结合，React让我们能够在JavaScript中以声明式的方式描述UI，通过组件化思想实现界面的模块化开发。这一系列机制，不仅提升了开发效率，也使得代码更易于理解和维护。不愧是“前端第一框架”，这可不是虚名昂。接下来，我将持续学习并分享，让我们一起加油！！

React入门：从入口文件到组件化的奥秘

转载自:https://juejin.cn/post/7385752495535276047
评论
请登录