React 入门教程笔记-阿里云开发者社区

安装 React

1、下载

wget https://cdn.staticfile.org/react/16.4.0/umd/react.development.js \
https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js \
https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js

react.min.js - React 的核心库

react-dom.min.js - 提供与 DOM 相关的功能

babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码

Babel 内嵌了对 JSX 的支持

如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel

2、hello world

<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<script src="./babel.min.js"></script>
<div id="app"></div>
<script type="text/babel">
  ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("app"));
</script>

React 元素渲染

1、创建元素

元素是构成 React 应用的最小单位，用于描述屏幕上输出的内容

const element = <h1>Hello, world!</h1>;
// 将元素渲染到 DOM 中
ReactDOM.render(element, document.getElementById("app"));

2、更新元素

React 元素都是不可变的, 更新界面的唯一办法是创建一个新的元素

计时器示例

function tick() {
  const element = <h2>现在时刻：{new Date().toLocaleString()}</h2>;
  ReactDOM.render(element, document.getElementById("app"));
}
setInterval(tick, 1000);

2、封装成函数

function Clock(props) {
  return <h2>现在时刻：{props.date.toLocaleString()}</h2>;
}
function tick() {
  ReactDOM.render(<Clock date={new Date()} />, document.getElementById("app"));
}
setInterval(tick, 1000);

4、创建 React.Component 子类

class Clock extends React.Component {
  render() {
    return <h2>现在时刻：{this.props.date.toLocaleString()}</h2>;
  }
}
function tick() {
  ReactDOM.render(<Clock date={new Date()} />, document.getElementById("app"));
}
setInterval(tick, 1000);

JSX

1、使用 JavaScript 表达式

ReactDOM.render(<h1>{1 + 1}</h1>, document.getElementById("app"));

可以使用 conditional (三元运算) 表达式

2、样式

React 推荐使用 camelCase 语法设置内联样式

const style = {
  fontSize: 20,
  color: "#FF0000",
};
ReactDOM.render(
  <h1 style={style}>hello world!</h1>,
  document.getElementById("app")
);

3、注释

ReactDOM.render(
  <div>
    <h1>hello world!</h1>
    {/*注释*/}
  </div>,
  document.getElementById("app")
);

数组

数组会自动展开所有成员

var arr = [<h1>hello</h1>, <h1>world!</h1>];
ReactDOM.render(<div>{arr}</div>, document.getElementById("app"));

组件

原生 HTML 元素名以小写字母开头，

自定义的 React 类名以大写字母开头

class 属性需要写成 className ，

for 属性需要写成 htmlFor

1、函数定义组件

function MyComponent(props) {
  return <h1>{props.name}</h1>;
}
ReactDOM.render(<MyComponent name="Tom" />, document.getElementById("app"));

2、ES6 class 定义组件

class MyComponent extends React.Component {
  render() {
    return <h1>{this.props.name}</h1>;
  }
}
ReactDOM.render(<MyComponent name="Tom" />, document.getElementById("app"));

3、复合组件

function Name(props) {
  return <h1>名称：{props.name}</h1>;
}
function Url(props) {
  return <h1>网址：{props.url}</h1>;
}
function App() {
  return (
    <div>
      <Name name="百度" />
      <Url url="http://www.baidu.com" />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("app"));

State(状态)

计时器每秒更新一次

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }
  // 挂载
  componentDidMount() {
    this.timerID = setInterval(() => {
      this.tick();
    }, 1000);
  }
  // 卸载
  componentWillUnMount() {
    clearInterval(this.timerID);
  }
  tick() {
    this.setState({
      date: new Date(),
    });
  }
  render() {
    return <h1>{this.state.date.toLocaleString()}</h1>;
  }
}
ReactDOM.render(<MyComponent />, document.getElementById("app"));

Props

props 不可变, 用来传递数据

state 用来更新和修改数据

function Name(props) {
  return <h1>{props.name}</h1>;
}
ReactDOM.render(<Name name="Tom" />, document.getElementById("app"));

事件处理

事件绑定属性的命名采用驼峰式写法

function Link() {
  function handleClick() {
    console.log("按钮被点击了");
  }
  return <button onClick={handleClick}>按钮</button>;
}
ReactDOM.render(<Link />, document.getElementById("app"));

按钮点击开启和关闭

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isToggleOn: true,
    };
  }
  handleClick(e) {
    this.setState((prevState) => ({
      isToggleOn: !prevState.isToggleOn,
    }));
  }
  render() {
    return (
      <button onClick={(e) => this.handleClick(e)}>
        {this.state.isToggleOn ? "开启" : "关闭"}
      </button>
    );
  }
}
ReactDOM.render(<Toggle />, document.getElementById("app"));

条件渲染

function User(props) {
  return <h1>User</h1>;
}
function Guest(props) {
  return <h1>Guest</h1>;
}
function App(props) {
  if (props.role == "user") {
    return <User />;
  } else {
    return <Guest />;
  }
}
ReactDOM.render(<App role="user" />, document.getElementById("app"));

列表 & Keys

每个列表元素需要分配一个兄弟元素之间的唯一 key

function App(props) {
  const numbers = [1, 2, 3];
  const items = numbers.map((item, index) => {
    return <li key={index}>{item}</li>;
  });
  return items;
}
ReactDOM.render(<App />, document.getElementById("app"));

组件 API

// 合并状态
setState(object nextState[, function callback])
// 替换状态
replaceState(object nextState[, function callback])
// 合并属性
setProps(object nextProps[, function callback])
// 替换属性
replaceProps(object nextProps[, function callback])
// 强制更新
forceUpdate([function callback])
// 获取DOM节点
DOMElement findDOMNode()
// 组件挂载状态
bool isMounted()

点击计数示例

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState((state) => {
      return { count: state.count + 1 };
    });
  }
  render() {
    return <h1 onClick={this.handleClick}>点击计数：{this.state.count}</h1>;
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

组件生命周期

三个状态

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

生命周期的方法

componentWillMount 在渲染前调用

componentDidMount 在第一次渲染后调用

componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用

shouldComponentUpdate 在组件接收到新的 props 或者 state 时被调用

componentWillUpdate 在组件接收到新的 props 或者 state 但还没有 render 时被调用

componentDidUpdate 在组件完成更新后立即调用

componentWillUnmount 在组件从 DOM 中移除之前立刻被调用

AJAX

服务端 server.js

cnpm i express cors

const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
app.use("/", function (req, res) {
  return res.send({ data: { name: "Tom" } });
});
app.listen(8080, function () {
  console.log("listening: http://127.0.0.1:8080");
});

下载 axios 并引入

wget https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
    };
  }
  componentDidMount() {
    axios.get("http://127.0.0.1:8080/").then((res) => {
      this.setState({
        name: res.data.data.name,
      });
    });
  }
  render() {
    return <h1>{this.state.name}</h1>;
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

表单与事件

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ value: event.target.value });
  }
  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
        ></input>
        <h2>{this.state.value}</h2>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

Refs

ReactDOM.render(<App />, document.getElementById("app"));

React 入门教程笔记

事件处理

条件渲染

列表 & Keys

组件 API

点击计数示例

组件生命周期

AJAX

下载 axios 并引入

表单与事件

Refs

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

React 入门教程笔记

事件处理

条件渲染

列表 & Keys

组件 API

点击计数示例

组件生命周期

AJAX

下载 axios 并引入

表单与事件

Refs

热门文章

最新文章

相关电子书