React 官网核心概念

核心概念

2. JSX

JS 扩展

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

视图与逻辑之间的结合

---

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用

以下两种示例代码完全等效：

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

// 预先执行一些检查，以帮助你编写无错代码
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// 实际上它创建了一个这样的对象
// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

这些对象被称为 “React 元素”

它们描述了你希望在屏幕上看到的内容 React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新

3. 元素渲染进根节点

元素：构成 React 应用的最小砖块 ，描述了你在屏幕上想看到的内容

将一个元素渲染为 DOM

假设你的 HTML 文件某处有一个 <div>：

<div id="root"></div>

想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()

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

4. 组件 & Props

组件，类似函数， 接受 “props” = > React 元素 （展页面示内容）

定义组件

1️⃣ 编写 JavaScript 函数

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

2️⃣ 使用 ES6 的 class 来定义组件

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

组件名称必须以大写字母开头

不能更改props

不能修改自身的 props。来看下这个 sum 函数：

function sum(a, b) {
   
	// 纯函数：不会尝试更改入参
  return a + b;
}

function withdraw(account, amount) {
   
	// 不是纯函数：更改了自己的入参
  account.total -= amount;
}

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

5. State & 生命周期

state : 私有的，完全受控于当前组件。 是组件自动更新

将函数组件转换成 class 组件

缺点：需要将 ReactDOM.render 放进一个函数，然后使用 setInterval 调用，并且 Clock需要传入参数

改进：直接调用 ReactDOM.render 并且 Clock 不要参数

方法：将函数组件变为 class 组件，state 类似与 props

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

1. 创建一个同名的 ES6 class，并且继承于 React.Component。
2. 添加一个空的 render() 方法。
3. 将函数体移动到 render() 方法之中。
4. 在 render() 方法中使用 this.props 替换 props

// 1
class Clock extends React.Component {
  // 2
  render() {
    // 3
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
    // 4 this.props		
  }
}