React Doc 简单摘要（一）

最新推荐文章于 2025-04-08 20:01:03 发布

停止更新+1

最新推荐文章于 2025-04-08 20:01:03 发布

阅读量453

点赞数

CC 4.0 BY-SA版权

文章标签： javascript react

本文链接：https://blog.youkuaiyun.com/anyicheng2015/article/details/77945128

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的React应用程序的创建过程，包括使用JSX语法、组件和属性的基本概念，以及如何渲染元素到页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Hello world

程序员第一个程序必定是 Hello World!
Html:

<div id="root">
    <!-- This div's content will be managed by React. -->
</div>

Javascript:

ReactDOM.render(
    <h1>Hello, world!</h1>
    document.getElementById('root')
);

在线代码编辑器（在线IDE）：
https://codepen.io/gaearon/pen/ZpvBNJ?editors=0010

JSX

下面是一个简单的JSX语法，看着是javascript和html的混合体。无需关心它底层是如何实现的，直接使用即可。

const element = <h1>Hello, world!</h1>;

可以在其中加入表达式：

function formatName(user) {
    return user.firstName + user.lastName;
}

const user = {
    firstName: 'Tom',
    lastName: 'White'
};

const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
};

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

JSX 语句本身也可以是表达式

function getGreeting(user) {
    if(user) {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
}

JSX 也可以设定属性

const element = <div tabIndex="0"></div>;
const anotherElement = <img src={user.avatarUrl}></img>;

JSX 也可以有children

const emptyElement = <img src={user.avatarUrl}/>;
const elementHasChildren = (
    <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
    </div>
);

JSX 表示的 Object
下面的两个例子是等价的：

const element = (
    <h1 className="greeting">
        Hello, world!
    </h1>
);

const element = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
);

React 最终创建的 object 可以用下面的代码简化表示

// Note: this structure is simplified
const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world'
    }
};

渲染 element

如 Hello world 的例子，React 找到对应的 DOM 中的节点，然后把内容渲染进去：
Html:

<div id="root">
    <!-- This div's content will be managed by React. -->
</div>

Javascript:

ReactDOM.render(
    <h1>Hello, world!</h1>
    document.getElementById('root')
);

一个更新element的例子：

function tick() {
    const element = (
        <div>
            <h1>Hello, world!</h1>
            <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('root')
    );
}

setInterval(tick, 1000);

组件和属性 Components and Props

使用 Function 或者 Class 来定义 Component
下面两种方式是等价的：

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {props.name}</h1>;
    }
}

如何渲染一个 component

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
    element,
    document.getElementById('root');
);

步骤：
1. 调用 ReactDOM.render 来渲染 <Welcome name="Sara" /> 。
2. React 调用带属性 {name: 'Sara'} 的 Welcome component。
3. Welcome component 返回 <h1>Hello, Sara</h1> 作为结果。
4. React DOM 更新真实的 DOM 使它和 <h1>Hello, Sara</h1> 一致。

复合组件

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}
function App() {
    return (
        <div>
            <Welcome name="Sara" />
            <Welcome name="Cahal" />
            <Welcome name="Edite" />
        </div>
    );
}

将一个复杂的组件拆分为一系列小组件
原始代码：

function Comment(props) {
    return (
        <div className="Comment">
            <div className="UserInfo">
                <img className="Avatar"
                    src={props.author.avatarUrl}
                    alt={props.author.name}
                />
                <div className="UserInfo-name">
                    {props.author.name}
                </div>
            </div>
            <div className="Comment-text">
                {props.text}
            </div>
            <div className="Comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}

转化结果：

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}