乐趣区

关于react.js:React前段学习一

jiezi

什么是React?

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

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

React 从诞生之初就是可被逐渐采纳的

HTML 中应用 React

<!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!”

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

JSX

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

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

在 JSX 中嵌入表达式

const name = 'Shao Jie';
const element = <h1>Hello, {name}</h1>;

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

在 JSX 语法中，能够在大括号内搁置任何无效的 JavaScript 表达式。例如：2 + 2，user.firstName

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：

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 特定属性

你能够通过应用引号，来将属性值指定为字符串字面量

const element = <div tabIndex="0"></div>;

也能够应用大括号，来在属性值中插入一个 JavaScript 表达式：

const element = ![]({user.avatarUrl}>)</img>;

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

元素渲染

元素是形成 React 利用的最小砖块。

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

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

元素与另一个被熟知的概念——” 组件 ” 表白的并不是一个货色

将一个元素渲染为 DOM

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

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

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

仅应用 React 构建的利用通常只有繁多的根 DOM 节点。如果你在将 React 集成进一个已有利用，那么你能够在利用中蕴含任意多的独立根 DOM 节点。

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

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

更新已渲染的元素

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

思考一个计时器的例子：

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 元素。

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

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

渲染组件

const element = <Welcome name="Shao Jie" />;

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

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

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

组合组件

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

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

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

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

React前段小白，学习 React 中，以后为集体学习记录，摘取 React 官网文，外围概念 1~4 大节，如有问题，请自行参考 React 官网文档

退出移动版