React前端学习

2021-08-10 11:30:24 浏览数 (1)

什么是React?

React 是一个用于构建用户界面的 JavaScript 库

React官方文档：https://react.docschina.org/

React 从诞生之初就是可被逐步采用的

HTML 中使用 React

代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Add React in HTML</title>
</head>
<body>

<!-- 操作的容器 -->
<div id="root">
</div>

</body>

<!-- 引入 react 操作dom得js -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- 如果你想使用 JSX 语法 这个js必须引入   -->
<!-- React 推荐使用 JSX 语法配合使用 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- React 代码 -->
<script>

</script>
</html>

Hello World

页面上展示一个 "Hello, world!"

代码语言：javascript复制
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

JSX

代码语言：javascript复制
const element = <h1>>Hello, world!</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);
在 JSX 中嵌入表达式
代码语言：javascript复制
const name = 'Shao Jie';
const element = <h1>Hello, {name}</h1>;

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

在 JSX 语法中，可以在大括号内放置任何有效的 JavaScript 表达式。例如：2 2，user.firstName

代码语言：javascript复制
function formatName(user) {
  return user.firstName   ' '   user.lastName;
}

const user = {
    firstName: 'Shao',
    lastName: 'Jie'
};

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

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

这东西像不像 Java 里面的面向对象

在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：

代码语言：javascript复制
const user = false;

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

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

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

ReactDOM.render(
    element,
    document.getElementById('root')
);
JSX 特定属性

你可以通过使用引号，来将属性值指定为字符串字面量

代码语言：javascript复制
const element = <div tabIndex="0"></div>;

也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：

代码语言：javascript复制
const element = <img src={user.avatarUrl}></img>;

官方警告 因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。 例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

元素渲染

元素是构成 React 应用的最小砖块。

代码语言：javascript复制
const element = <h1>Hello, world</h1>;

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

元素与另一个被熟知的概念——"组件"表达的并不是一个东西

将一个元素渲染为 DOM

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

代码语言：javascript复制
<div id="root"></div>

其称为“根” DOM 节点，因为该节点内的所有内容都将由 React DOM 管理。

仅使用 React 构建的应用通常只有单一的根 DOM 节点。如果你在将 React 集成进一个已有应用，那么你可以在应用中包含任意多的独立根 DOM 节点。

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

代码语言：javascript复制
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
更新已渲染的元素

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

考虑一个计时器的例子：

代码语言：javascript复制
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);

组件 & Props

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

代码语言：javascript复制
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}
代码语言：javascript复制
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

上述两个组件在 React 里是等效的

渲染组件
代码语言：javascript复制
const element = <Welcome name="Shao Jie" />;

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

例如，这段代码会在页面上渲染 “Hello, Shao Jie”

代码语言：javascript复制
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

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

这个例子是如何调用的：

  1. 我们调用 ReactDOM.render() 函数，并传入 <Welcome name="Shao Jie" /> 作为参数。
  2. React 调用 Welcome 组件，并将 {name: 'Shao Jie'} 作为 props 传入。
  3. Welcome 组件将 <h1>Hello, Shao Jie</h1> 元素作为返回值。
  4. React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。

官方建议 ： 组件名称必须以大写字母开头。 例如：Welcome

组合组件
代码语言：javascript复制
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')
);
Props 的只读性

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props

代码语言：javascript复制
function sum(a, b) {
  return a   b;
}

这样的函数被称为“纯函数”，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。

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

React前段小白，学习React中，当前为个人学习记录，摘取React官方文，核心概念 1~4 小节，如有问题，请自行参考 React官方文档

react javascript html 渲染 官方文档

0 人点赞