React Hooks

React Hooks

useState： 解决状态问题
useEffect：类似生命周期(组件加载的时候或者当数据改变时可以重新获取)
修改app.js

export default function App() {
    //useState,效果与有状态组件state={}相同
    const [count,setCount] = useState(10);
    //useEffect 第二个参数传递空数组 log只会打印一次
    //可以在setCount修改初始值
    useEffect(()=>{
        console.log("执行了useEffect");
        setCount(100);
    },[])

    return <div  class="container">
        <h1>欢迎来到React的世界</h1>
        {/*useState*/}
        <p>
            当前count次数:{count}
        </p>
        <Button onClick={()=>{setCount(count+1)}}>更新次数</Button>
    </div>
}

api:
useParams：获取参数（内部封装）
useHistory：通过js api操作路由跳转

detail.js

import {useParams,useHistory} from "react-router-dom";

export default function Detail() {
    //React Hooks
    // 1、useParams 
    const params = useParams();
    //2、useHistory
    const history = useHistory();
    return <div  className="container">
        {/*useParams */}
        {/*<h1>this is detail</h1>*/}
        {/*<p>当前的参数json数据为：{JSON.stringify(params)}</p>*/}
        {/*<p>当前的参数值为：{params.goodsId}</p>*/}

        {/*useHistory*/}
        <h1>this is detail</h1>
        <p>当前的参数值为：{params.goodsId}</p>
        <Button onClick={()=>{
            history.push('/')
        }}>跳转</Button>
    </div>
}


//有状态组件
// export default class Detail extends React.Component{
//
//     jumpHome=()=>{
//         this.props.history.push('/')
//     }
//
//     render() {
//         return <div className="container">
//             <h1>this is detail</h1>
//             {/*根据地址获取参数 图4所示 */}
//             <p>当前的参数值为：{this.props.match.params.goodsId}</p>
//             <Button onClick={this.jumpHome}>跳转</Button>
//         </div>
//     }
// }

实例（登录+列表）

1.首页

export default function DemoApp() {
    return <div  className="container">
        <Link to="/demologin">跳转登录</Link>
        <br/>
        <Link to="/demohome">跳转主页</Link>
        <br/>
    </div>
}

2.router.js

<Route path = "/demo" component={DemoApp}/>
<Route path = "/demologin" component={DemoLogin}/>
<Route path = "/demohome" component={DemoHome}/>

3.登录页面
安装 axios： npm isntall axios --save

import React ,{useState}from 'react'
import {Form,Input,Button} from "antd";
import {useHistory} from "react-router-dom";
import './demo.scss'
import axios from 'axios'

const FormItem = Form.Item;
export default function DemoLogin() {
    const [name,setName] = useState('');
    const [pwd,setPwd] = useState('');
    const history = useHistory();

    return <Form className={"login-form"}>
        <FormItem>
            <Input placeholder={"请输入用户名"} maxLength={5} onChange={(event)=>{
                setName(event.target.value)     
/* 这种方法就可以输入用户名后，给value自动赋新值*/
            }}/>     

        </FormItem>
        <FormItem>
            <Input placeholder={"请输入密码"} maxLength={5} type="password" onChange={(event)=>{
                setPwd(event.target.value)
            }}/>
        </FormItem>
        <label>用户名：{name}    密码：{pwd}</label>
/* 使用变量记得加上大括号*/
        <FormItem>
/* 传递两个参数，history只能在当前组件内调用，所以在这里写的.then去获取再跳转*/
            <Button type={"primary"} onClick={()=>{
                login(name,pwd).then((response)=>{
                    let res = response.data;
                    if (res.code===0){
                        history.push('/demohome')
                    }
                })
            }}>登录</Button>
        </FormItem>


    </Form>
}

function login(name,pwd) {
    return axios.get('login.json',{
        params:{
            name,pwd
        }
/* 第二个是传递的参数*/
    })
}

一些知识点：

calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

scss同级使用 &
a{
display: inline-block;
//a 标签和class在同一级用&
&.checked{
color:lightseagreen ;
}
}

有需要的表格可以去ant 里找例子然后复制代码

导航的切换：

import React,{useEffect,useState} from 'react'
const [index,setIndex] = useState(0);
            <div className={"nav"}>
                <a className={index==0 ?"checked":""} onClick={()=>setIndex(0)}>语言动态</a>
                <a className={index==1 ?"checked":""} onClick={()=>setIndex(1)}>语言地图</a>
                <a className={index==2 ?"checked":""} onClick={()=>setIndex(2)}>语言热搜</a>
                <a className={index==3 ?"checked":""} onClick={()=>setIndex(3)}>语言播报</a>
            </div>

 <Table bordered
               pagination={false}
               columns={columns}
               dataSource={data} />

pagination="false"只是字符串 ， pagination={false} 大括号才是布尔值，