React 元素与组件

React 哲学

引导我们思考如何构建应用!

这句话特别有意思,当我看到这句话时,我就明白了。明白了为什么 React 是这样设计,明白了它的核心理念。咱们回过头来想想,我们在开始一个项目的时候,是否也是花很多时间思考如何设计工程、如何设计组件,有哪些存在的问题?我觉得,这就是核心理念与 vue 不一样的地方吧。

JSX 介绍

JSX 是一个 JavaScript 的语法扩展,它具备全部 JavaScript 功能。开发者可以自由选择是否使用 JSX,但官方是建议使用的,因为真的很方便。

React 元素

// React 元素,不是字符串,也不是 DOM
const element = <h1>Hello, world</h1>;

React 元素是构建 React 应用的最小单位,React 元素并非 DOM 元素。React 元素是开销极小的普通对象,React DOM 会负责更新 DOM 以确保保持一致。

React 元素是不可变对象,一旦创建就无法更改它的子元素或属性。

React DOM 会将元素及子元素状态进行 React DOM diff,并只会进行必要的更新来达到 DOM 的预期状态。

React 元素可以是 DOM 标签,也可以是用户定义的组件。

组件

// 用户自定义组件,并传入一个参数,JSX转属性 name 置换成 props.name
const element = <Welcome name="Sara" />;

组件分为函数式组件和 Class 组件,默认接收一个名为 props 对象做为参数,并返回用于展示页面内容的 React 元素。props 对象是 JSX 从自定义组件属性转换而来。

组件名称必须以大写字母开头,以便 JSX 识别是原生 DOM 还是自定义组件。

所有 React 组件都决不能修改自己 props,无论是函数式声明或 Class 式声明。

组件在返回内容中可以引用其它组件,方便进行组件组合。组件组合是很有趣的工作,它引导我们深入思考应用的构成,这以 React 哲学一样。同时,也能最大化的复用组件,以减少代码冗余。

函数式声明组件

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

Class 式声明组件

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

标签: none

评论已关闭