命令

npx create-react-app my-app
npx create-react-app my-app --template typescript
npm start

jsx

React认为视图的本质就是渲染逻辑与UI视图表现的内在统一，React把HTML与渲染逻辑进行了耦合，形成了JSX。

JSX的特点

HTML代码可以与jsx兼容
可以在jsx中镶如表达式
使用jsx指定子元素
小驼峰命名。class变成了className、tabindex变成tabIndex
jsx自定义属性，以 data- 开头

JSX 编译成对象

jsx会被编译成React.createElement() 对象

const element = (
    <h1 className="greeting">hello</h1>
);
const element = React.createElement(
    'h1',
    {className='greeting' },
    'hello'
);
// 这两种写法一样
// jsx 会被编译成React.createElement()对象
const element = { // 最后输出的对象
    type: 'h1',
    props: {
        className:'greeting',
        children:'hello'
    }
}

css in js

新建custom.d.ts 这种文件可以被ts直接识别。不被编译不备打包

// 声明 CSS 文件。讲过声明后才可以被TS识别
declare module "*.css" {
    const css: { [key: string]: string }
    export default css
}

import style from './index.css' <div className={style.app}></div>

npm install typescript-plugin-css-modules --save

加载媒体资源

新建assets文件夹。存储images、fonts、icons

class 组件

react组件必须继承React.Component ，这个组件接受一个泛型（Props,State,自定义数据）

class ShoppingCart extends React.Component<Props, State>{
   constructor(props: Props) { // 传递来的Props
   super(props); // 必须调用父类
   this.state = { // 初始化state
     isOpen: false,
    }
   }
   render() {
       return (
           // DOM 元素
       )
   }
}

行内样式

行内样式接受一个采用小驼峰命名属性的js对象，可以预防xss攻击

const divStyle = {
    color: 'blue'
}
// 在组件内使用时
return ( <div style={divStyle}></div> )

State和Props的区别

props是组件对外的接口，而state是组件对内部的接口
props用于组件间数据传递，而state用于组件内部的数据传递

用setState()修改State

this.setState({isOpen:false})

构建函数constructor是唯一可以初始化state的地方

constructor(props) {
    super(props)
    this.state = {
        count: 0
    }
}

调用setState后，state不会立即改变，是异步操作
不要依赖当前的state，计算下一个state
state处理一般发生在声明周期变化的时候。（生命周期不变，state就是开始那个值）

<button onClick = {
        this.setState((preState, preProps) => {
            return {count: this.preState.count++}
        }, ()=>{})
    }>
</button>

Props

props是只读属性

事件处理

handleClick = (e) => {
    e.tatget // 描述的是时间发生的元素
    e.currentTarger // 描述的是时间处理绑定的元素
}

react中的icon

npm install react-icons

<FcAddressBook />组件方式使用

React生命周期

Mounting：创建虚拟DOM，渲染UI
Updating：更新虚拟DOM，重新渲染UI
Unmounting：删除虚拟DOM，移除UI

  shouldComponentUpdate(nextProps, nextState) {
     return (nextState.some! = this.state.some);
  }
  componentDidUpdate() {}
  componentWillUnmount() {}