React

官网：React (docschina.org)

安装React

html中直接导入

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

• react.min.js - React 的核心库
• react-dom.min.js - 提供与 DOM 相关的功能
• babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

使用create-react-app构建项目

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境

官网：Create React App (create-react-app.dev)

npx create-react-app my-app
cd my-app
npm start

概念

JSX

JavaScript + XML，js的语法扩展，可以在JavaScript中写XML

使用create-react-app创建的项目中有babel，经过babel编译处理后才能在浏览器环境中使用

例子

import React from 'react'
import ReactDOM from 'react-dom'

// JSX来创建react元素
const element = (
    <h1>Hello, JSX</h1>
); 

// 版本17及之前
// 表示将 element 这个 JSX 渲染到 id 为 root 的元素上
ReactDOM.render(
  element,
  document.getElementById('root')
);

// 18之后的版本用ReactDOM.createRoot()
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  element
);

注意点：

1. React元素的属性名使用驼峰命名法
2. 特殊属性名要转换成对应写法：class -> className、for -> htmlFor、tabindex -> tablndex
3. 没有子节点的React元素可以用/>结束
4. 推荐使用()包裹JSX

嵌入JS表达式

• 语法：{JS表达式}

  const name = 'Jack'
  const dv = (
  <div>我叫: {name}</div>
  )

• 注意点

  • 单大括号里可以直接使用js表达式
  • JSX自身也是JS表达式
  • 不能在{}中出现语句(如：if/for)

条件渲染

const isLoading = false
const loadData = () => {
  if (isLoading) {
    return <div>loading...</div>
  }
  return <div>数据加载完成</div>
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <h1>
    {loadData()}
  </h1>
);

列表渲染

• 使用map()来渲染一组数据
• 列表应该添加key

const songs = [
  {id: 1, name: 'a'},
  {id: 2, name: 'b'},
  {id: 3, name: 'c'},
]

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <h1>
    {songs.map(item => <li key={item.id}>{item.name}</li>)}
  </h1>
);

样式处理

• 行内样式

  // 第一个{}表示嵌入表达式，第二个{}表示对象
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <h1 style = {{ color: 'red', backgroundColor: 'skyblue' }}>
      样式处理
    </h1>
  );

• 类名

  记得导入

  // App.js
  import './index.css';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <h1 className='title'>
      样式处理
    </h1>
  );

  // index.css
  
  .title {
    text-align: center;
  }

组件

props是父组件传给子组件的属性（只读，单向）

定义组件方式1：函数式

function MyComp(props) {
  return <h1>hello {props.name}</h1>;
}

定义组件方式2：类组件式，需要继承React.Component，需要定义render方法

import React;

// 继承于 React.Component
class MyComp extends React.Component {
   // 类似构造函数
  constructor(props) {
    super(props); 
  }
  
   // 返回展示的视图结构
  render() {
    // render 方法返回需要展示的视图结构——React元素
    return <h1>hello {this.props.name}</h1>;
  }
}

类组件生命周期

挂载阶段

constructor() // class 的构造方法，在其中 super(props) 接收参数

componentWillMount() // 挂载前

render() // 返回React元素

componentDidMount() // 挂载后

更新阶段

componentWillReceiveProps(nextProps) // props 变化时调用，nextProps 是新参数

shouldComponentUpdate(nextProps, nextState) // 是否继续执行更新过程，返回一个布尔值

componentWillUpdate(nextProps, nextState) // 更新前

render()

componentDidUpdate(prevProps, prevState) // 更新后

卸载阶段

componentWillUnmount() { } // 组件被删除前调用，执行一些清理工作

state&props

props：是父组件传给子组件的属性（只读，单向）

const HelloWorld = (props) => <div>Hello {props.name}</div>

function App() {
  return (
      <div>
        <HelloWorld name="Someone :)"/>
      </div>
  );
}

state：组件自己的数据

class MyComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      time: new Date(),
    };
  }
  render() {
    return <h1>Its {this.state.time}</h1>;
  }
}

Hello World

1. 创建项目

   npx create-react-app my-app

2. 精简项目

   将public目录里除了favicon.ico和index.html的文件删掉

   将src里除了App.js的文件删掉，创建index.js

// App.js
import React from 'react'

function App() {

  return (
      <div className="App">
        <h1>Hello World</h1>
      </div>
  );
}

export default App;

// index.js
import React from "react";
import ReactDOM from "react-dom"
import App from "./App"

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

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>
</html>