React 基础

---

初识React

---

步骤一：添加一个DOM容器到HTML

<div id="app"></div>

步骤二：添加Script标签

// 加载 React
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
// 加载 React组件
<script src="app.js"></script>

步骤三：创建一个React组件

const e = React.createElement;
class LikeButton extends React.Component {
   
	constructor(props) {
   
		super(props);
		this.state = {
   
			liked: false
		};
	}
	render () {
   
		if (this.state.liked) {
   
			return 'You liked this.';s
		}
		// 函数调用方式
		return e(
			'button',
			{
   onClick: () => this.setState({
   
				liked: true
			})},
			'Like'
		)
		// JSX方式
		return (
			<button onClick={
   () => this.setState({
    
			liked: true})}
			>
			Like
			</button>
		)
	}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(e(LikeButton), domContainer);

添加JSX脚本

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

创建新的React应用

// 前提是要安装node
// 执行命令
npx create-react-app my-app
cd my-app
npm start

---

JSX 了解

---

/*
	在下面的例子中，我们声明了一个名为 name 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：
*/
const name = 'heqiuyu';
const element = <h1>Hello, {
   name}</h1>;

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

/*
	在下面的示例中，我们将调用 JavaScript 函数 formatName(user) 的结果，并将结果嵌入到 <h1> 元素中。
*/
function formatName (user) {
   
	return user.firstName + ' ' + user.lastName; 
}
const user = {
   
	firstName: 'heqiuyu',
	lastName: 'baixiaoyun'
};
const element = (
	<h1>Hello, {
   formatName(user)}</h1>
);
ReactDOM.render(
	element,
	document.getElementById('app')
);

JSX 特定属性

// 你可以通过使用引号，来将属性值指定为字符串字面量：
const ele = <div tabIndex="0"></div>

// 也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：
const ele = <img src={
   user.avatarUrl} />
/*
	***注意：在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。***
*/

---

元素渲染

---

// 第一步：
<div id="app"></div>

// 第二步：
const ele = <h1>Hello, world</h1>
ReactDOM.render(ele, document.getElementById('app'));

更新已渲染的元素

// React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性
function tick () {
   
	const ele = (
		<div>
			<h1>Hello, world</h1>
			<h2>It is {
   new Date().toLocaleTimeString()}</h2>
		</div>
	)
	ReactDOM.render(
		ele,
		document.getElementById('app')
	);
}

setInterval(tick, 1000);

---

组件 & Props

---

组件，从概念上类似于 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