react 学习笔记（一）

babel

babel 用来将高级代码（jsx es6）转换为浏览器兼容代码

开始使用

新建一个目录并执行

# npm init -y
# npm install babel-cli@6 babel-preset-react-app@3

在该目录新建 src 目录并执行

npx babel --watch src --out-dir . --presets react-app/prod

npx 是 npm 的高级版，他会自动找 node_modules/.bin 下面的命令 该命令会阻塞终端，并监听 src 目录下js文件的修改，自动编译为浏览器兼容的 js 文件放在指定的输出目录下
这样，在旧浏览器上也能够使用现代 JavaScript 的语法特性，比如 class

jsx

jsx 是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

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

create react app

组件 & Props

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。本指南旨在介绍组件的相关理念。

组件 api

props 是组件的入参，使用组件时，通过给标签传属性值设置

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 一般情况下我们都是使用类来描述组件，使用函数有很多不便之处，比如类支持 componentDidxxx 系列的方法
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

调用组件

const element = <Welcome name="Sara" />;

注意：props 是只读的，组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。

State & 生命周期

State 它保存了在这个组件中有状态的数据，一个组件会有很多数据，每个数据的更新被描述成一种状态更新
我称它为数据驱动，通过数据的改变使当前的组件呈现不同的形态
不同于 Props，State是动态的私有的

class Clock 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 (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

这是官网示例，他是一个时钟，会在每秒更新，我们来详细解读：

首先通过 this.state = {date: new Date()}; 为组件定义了一个有状态数据
然后在组件的生命周期函数 componentDidMount （当组件完成初始化）中设置了定时器，每秒更新 date 的值
render 描述了组件如何被渲染到界面，h2 中的值会随着时间流逝不停的更新

事件处理

条件渲染

循环列表

Hook

useEffect

useEffect 做了什么？ 通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。在这个 effect 中，我们设置了 document 的 title 属性，不过我们也可以执行数据获取或调用其他命令式的 API。

useEffect 在组件渲染后执行，所以他是不阻塞UI的，这一点和安卓的“不在渲染线程执行网络请求”是一个逻辑