共计 3885 个字符，预计需要花费 10 分钟才能阅读完成。
什么是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 = </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')
);这个例子是如何调用的：
- 咱们调用
ReactDOM.render()函数，并传入<Welcome name="Shao Jie" />作为参数。 - React 调用 Welcome 组件，并将 {name: ‘Shao Jie’} 作为 props 传入。
- Welcome 组件将
<h1>Hello, Shao Jie</h1>元素作为返回值。 - 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 官网文档