在React官方教程中学到的笔记（JSX、React元素、React组件）

2 年 ago

科, 颖

2 minutes

这是一个简短的总结。

Components and Props

JSX -> JSX

这是一种用于JS的扩展语法，被推荐在React中使用。

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

在{}中能够嵌入JS语法。

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

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

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

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

CodePen 独立运营的在线社区频道，让用户可以实时编辑和展示 HTML、CSS 和 JavaScript 代码。

在将JS放入HTML属性时，请注意不要添加””。

const element = <img src={user.avatarUrl}></img>;

请注意，属性的标签应采用驼峰命名法。（例如：className、tabIndex）

如果要定义嵌套的DOM，请使用括号()进行包围。

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

作为跨站脚本攻击的防范措施，嵌入在JSX中的值会在React DOM渲染之前进行转义，因此很安全。

// titleに危険な値が入っていてもエスケープされる.
const element = <h1>{title}</h1>;

React元素和渲染

通过Babel的转换，JSX变成了React元素的对象。

// これが
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中，用于操作的范围被称为根DOM节点，并附带一个名为root的ID。通常情况下，React应用程序中只会存在一个根DOM节点。我们可以使用ReactDOM.render()来操作这个节点的内容。在常规的React应用程序中，通常只需要调用一次ReactDOM.render()。

// ルートDOMノード
<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

//ルートDOMノードの内容を書き換える
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

CodePen的原生中文解释：代码笔网

React组件

将返回React元素的函数称为React组件。

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

使用ES6的类进行编写方式

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

如果在JSX中存在用户定义的标签，那么该标签与同名的React组件将被调用。在这种情况下，props的内容将变为JSX标签内的属性。

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

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

CodePen 程序

可以从一个组件调用另一个组件。

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

CodePen：
代码笔

如果UI中有经常使用的部件（例如按钮等）或复杂的部件（例如评论、动态等），将其作为一个组件进行分离是最佳实践。

只需要一种选项：盘点

注意事项：请勿修改组件中的props值。

function sum(a, b) {
  return a + b;
}

不可以

function withdraw(account, amount) {
  account.total -= amount;
}