创作人 Leo
编辑时间 Wed Nov 23,2022 at 15:03
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 是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。
const element = <h1>Hello, world!</h1>;
组件允许你将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思。本指南旨在介绍组件的相关理念。
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 它保存了在这个组件中有状态的数据,一个组件会有很多数据,每个数据的更新被描述成一种状态更新
我称它为数据驱动,通过数据的改变使当前的组件呈现不同的形态
不同于 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 中的值会随着时间流逝不停的更新
useEffect
useEffect 做了什么? 通过使用这个 Hook,你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数(我们将它称之为 “effect”),并且在执行 DOM 更新之后调用它。在这个 effect 中,我们设置了 document 的 title 属性,不过我们也可以执行数据获取或调用其他命令式的 API。
useEffect 在组件渲染后执行,所以他是不阻塞UI的,这一点和安卓的“不在渲染线程执行网络请求”是一个逻辑