实战:react16+typescript+redux+hooks

开发体验

修改代码，调整目录都需要重启服务
redux: view可以直接到reducer连接到state，action是自封装中间层

搭建工程

步骤

• npx create-react-app demo-react-ts --template typescript
• cd demo-react-ts
• yarn start
• yarn build

文件说明

• tsconfig.json: ?程ts特定的选项
• tslint.json: 代码检查器的设置，TSLint
• package.json: 依赖，命令快捷?式
• public: 静态资源或图?。除index.html外，其它?件非必须
• src: 包含ts和css源码。index.tsx是强制???件

创建简单组件-hello

定义函数组件

import logo from '../logo.png';// 创建类型接口
export interface IProps {
    msg: string
}// 使用接口Iprops代替 PropTypes 进行类型校验
function Hello({
    msg}:IProps) {
    return (<div><img src={
    logo}/><h1>Hello react ts!</h1><p>{
    msg}</p></div>);
}export default Hello;

调用函数组件

import App11 from './app/1.1.hello.function';ReactDOM.render(<React.StrictMode><div className="wrap"><App11  msg="函数组件"/>     </div></React.StrictMode>,document.getElementById('root')
);

效果

体验hooks

view

// view
<p><button onClick={
    handleMinus}>-</button><span>{
    curNum}</span><button onClick={
    handleAdd}>+</button>
</p>

data

// data: useState
import {
     useState  } from "react";// num: props
const [curNum, setCurNum] = useState(num); 
const handleMinus = () => {
    const newNum = curNum - 1;setCurNum(newNum)
}
const