React

react安装

js引入方式

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

js
let h1=React.createElement('h1',{id:'h1',price:10},'hello react');
let root=document.querySelector("#root");
ReactDOM.render(h1,root)

脚手架构建

npx create-react-app 项目

cd 项目名

//运行
npm start

元素渲染

下面示例都在elementrender.js中编辑 index.js需要导入一次即可

变量渲染

elementrender.js

import React from 'react';
import ReactDOM from 'react-dom/client';
let h1=<h1>这是一种</h1>
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    h1
);

index.js中导入

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './elementrender'

方法渲染

//方法的接收的变量名首字母必须是大写

import React from 'react';
import ReactDOM from 'react-dom/client';
const Then=function () {
    return (
        <div>
            <h1>方法渲染</h1>
        </div>
    );
}
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Then/>
);

定义变量显示

显示变量或者调用方法时使用 {} 需要导入到index.js

varibleshow.js

import React from 'react';
import ReactDOM from 'react-dom/client';

let name = '李四'
let age=19;

let cf=(
    <div>
        <h1>{name}</h1>
        <h1>age</h1>
    </div>
);
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    cf
)

使用样式

示例使用usecss.js 需要导入到index.js

导入样式使用

css文件中定义样式

.hj{
  font-size:50px;
  color:green;
}

使用样式

import React from "react";
import ReactDOM from "react-dom/client";
//导入样式
import './index.css';
//className指定样式名
let nk=(
    <div className='hj'>
        <h1>你好</h1>
    </div>
)
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    nk
)

行样式

import React from "react";
import ReactDOM from "react-dom/client";
//定义样式 不能使用- -的后一个字母都为大写
let rowcss={
    color:'pink',
    fontSize:'40px'
}
let mk=(
    <div>
        <h1 style={rowcss}>你好啊</h1>
    </div>
)
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    mk
)

条件判断

下面示例均在conditionjudge.js中测试 需要导入到index.js

import React from 'react'
import ReactDOM from "react-dom/client";
//判断 通过不同的判断返回对应的html代码
let jude=(name)=>{
    if(name.length>0){
        return <h1>登入成功！{name}</h1>
    }else{
        return <h1>登入失败！</h1>
    }
}
let kl=(
    <div>
        <h1>条件判断</h1>
        {jude('')}
        {jude('李四')}
    </div>
)
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    kl
)

遍历数组

示例均使用traversearray.js 需要在index.js中导入

遍历需要加key

普通数据

import React from "react";
import ReactDOM from "react-dom/client";

let cf=[10,34,45,657,8];
//返回的是一个个的li
let mk=cf.map((v)=><li key={v}>{v}</li>);
let o=(
    <div>
        <ul>
            {mk}
        </ul>
    </div>
)
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    o
);

对象数组

注意：表格必须要thead 和 tbody

import React from "react";
import ReactDOM from "react-dom/client";
//对象数组
let obj=[
    {id:10,name:'李四',address:'湖南'},
    {id:11,name:'李四2',address:'湖南2'},
    {id:12,name:'李四3',address:'湖南3'}
]
//表格设置内置样式 
let b1='1px';//表格边框
let cespa=0;//表格边距0

//循环对象数组
let nk=obj.map((v)=><tr key={v.id}><td>{v.id}</td><td>{v.name}</td><td>{v.address}</td></tr>);

//显示
let tab=(
    <div>
        <table border={b1} cellSpacing={cespa}>
            <thead>
            <tr>
                <td>ID</td><td>姓名</td><td>地址</td>
            </tr>
            </thead>
            <tbody>
                {nk}
            </tbody>
        </table>
    </div>
)
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
    tab
);

JSX

jsx就是可以在js中写html

组件

函数组件

elmoulde.js 需要在index.js中引入

import React from 'react'
import ReactDOM from "react-dom/client";
//函数组件 第一个名字必须大写
function Box(){
//点击事件
    function dj(){
        console.log(1)
    }
    return(
        <div>
            <h1>函数组件</h1>
            <button onClick={dj}>点击</button>
        </div>
    )
}
const root =ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Box/>
)

类组件

import React from 'react'
import ReactDOM from "react-dom/client";

class Box2 extends React.Component {
    //点击事件
    show(){
        console.log(1);
    }
    render() {
        return(
            <div>
                <h1>类组件</h1>
                <button onClick={this.show}>点击</button>
            </div>
        )
    }
}
const root =ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Box2/>
)

独立组件

创建独立文件 onemoule.js

import React from "react";
class Box3 extends React.Component {
    dj(){
        console.log(1);
    }
    render() {
        return(
            <div>
                <h1>独立组件</h1>
                <button onClick={this.dj}>点击</button>
            </div>
        );
    }
}
export default Box3

使用组件 index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
//导入独立组件JS
import Box3 from "./onemoule";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Box3/>
);

state状态

基本定义和使用

使用的是类组件需要在index.js导入使用

import React from "react";
import ReactDOM from "react-dom/client";
class State01 extends React.Component{
    constructor() {
        super();
        this.state={
            count:0
        }
    }
    /** 也可以这样
    state={
      
    }**/
    dj=()=>{
        console.log(1);
        this.setState({
            count:this.state.count+1
        })
    }
    render() {
        return(
            <div>
                <h1>计数器</h1>
                <h1>count:{this.state.count}</h1>
                <button onClick={this.dj}>点击</button>
            </div>
        )
    }
}
export default State01

表单使用

如输入框 下拉框…

原生

import React from "react";
import ReactDOM from "react-dom/client";
/**
 * 表单和状态的绑定
 *
 * 受控组件 input
 * 非受控组件
 */
class Yanshifrom extends React.Component{
    state={
        name:'李四',
        area:'湖南省',
        city:'白云区',
        chtr:true
    }
    //input事件
    incl=(e)=>{
        console.log(e);
        this.setState({
            name:e.target.value
        });
        console.log(this.state.name);
    }
    //文本域改变事件
    chatear=(e)=>{
        console.log(e)
        this.setState({
            area:e.target.value
        });
        console.log(this.state.area);
    }
    //下拉
    sech=(e)=>{
        console.log(e);
        this.setState({
            city:e.target.value
        })
        console.log(this.state.city);
    }
    //复选
    chchbox=(e)=>{
        //console.log(e.target.checked);
        this.setState({
            chtr:e.target.checked
        });
        console.log(this.state.chtr);
    }
    render() {
        return(
            <div>
                <h1>表单测试</h1>
                <p>
                    {/*必须加onchange事件*/}
                    文本框：<input type='text' value={this.state.name} onChange={this.incl}/>
                </p>
                <p>
                    多行文本域：<textarea rows='10' cols='80' value={this.state.area} onChange={this.chatear}>
                    </textarea>
                </p>
                <p>
                    <select value={this.state.city} onChange={this.sech}>
                        <option>花都区</option>
                        <option>番禺区</option>
                        <option>白云区</option>
                    </select>
                </p>
                <p>
                    <input type="checkbox" checked={this.state.chtr} onChange={this.chchbox}/>游戏
                </p>
            </div>
        )
    }
};
export default Yanshifrom

优化

import React from "react";
import ReactDOM from "react-dom/client";
/**
 * 表单和状态的绑定
 * 优化
 */
class YanshifromYh extends React.Component{
    state={
        name:'李四',
        area:'湖南省',
        city:'白云区',
        chtr:true
    }
    //优化成一个方法 test4from的优化
    formhand=(obj,e)=>{
        let t=e.target;
        //判断是不是复选框
        let value=t.type === 'checkbox' ? t.checked : t.value;
        this.setState({
            //[这里面是变量]
            [obj]:value
        })
    }
    render() {
        return(
            <div>
                <h1>表单测试</h1>
                <p>
                    {/*必须加onchange事件*/}
                    文本框：<input type='text' value={this.state.name} onChange={this.formhand.bind(this,'name')}/>
                </p>
                <p>
                    多行文本域：<textarea rows='10' cols='80' value={this.state.area} onChange={this.formhand.bind(this,'area')}>
                    </textarea>
                </p>
                <p>
                    <select value={this.state.city} onChange={this.formhand.bind(this,'city')}>
                        <option>花都区</option>
                        <option>番禺区</option>
                        <option>白云区</option>
                    </select>
                </p>
                <p>
                    <input type="checkbox" checked={this.state.chtr} onChange={this.formhand.bind(this,'chtr')}/>游戏
                </p>
            </div>
        )
    }
};
export default YanshifromYh

事件

事件传值

<input type="checkbox" checked={this.state.chtr} onChange={this.formhand.bind(this,'chtr')}/>游戏

formhand=(obj,e)=>{
  //obj是传的值 e是标签本身
}

发表评论示例

丐版

import React from "react";
import ReactDOM from "react-dom/client";
class Component extends React.Component{
    state ={
        name:'',
        text:'',
        are:[]
    }
    change=(obj,e)=>{
        this.setState({
            [obj]:e.target.value
        })
    }
    mk(){
        if(this.state.are.length===0){
            return <h1>暂无评论！</h1>
        }else{
            let ok=this.state.are.map((v,index)=><div key={index}>
                <h1>{v.name}</h1>
                <div>
                    {v.text}
                </div>
            </div>);
            return  ok;
        }
    }
    fb=()=>{
        let ar=this.state.are;
        ar.unshift({
            name: this.state.name,
            text: this.state.text
        })
        this.setState({
            are:ar,
            name:'',
            text:''
        })
    }
    render() {
        return(
            <div>
                <h1>评论</h1>
                <input type="text" value={this.state.name} onChange={this.change.bind(this,'name')}/>
                <p>
                    <textarea value={this.state.text} onChange={this.change.bind(this,'text')}>
                    </textarea>
                </p>
                <p><button onClick={this.fb}>发表</button></p>
                <div>
                    {this.mk()}
                </div>
            </div>
        )
    }
}
export default Component

组件传值

父传子

方式一

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import ComponentParams from "./ComponentParamsfcz";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
   <ComponentParams name='李四' age={18} arr={[1,22,34,35,4556,6888]} fn={()=>alert('my this function')} tag={<h1>my this tages</h1>}/>
);

组件接收

import React from "react";
//组件传递属性 父传子
class ComParms extends React.Component{
    //接收组件传的值 是一个对象  没有传值的话是一个空对象
    constructor(props) {
        super(props);
        console.log(this.props);
        console.log(this.props.name);
    }
    render() {
        //结构传来的数据
        let {name,age,arr,fn,tag} = this.props;
        //遍历数组
        let ok =arr.map((v)=><li key={v}>{v}</li>);
        return(
            <div>
                <h1>组件传参数</h1>
                <h1>字符串 {name}</h1>
                <h1>数字 {age+2}</h1>
                <h1>数组<ul>{ok}</ul></h1>
                <button onClick={fn}>函数</button>
                {tag}
            </div>
        )
    }
}
export default ComParms

方式二

import React from "react";
/**
 * 父传子
 */
//父组件
class Parent extends React.Component{
    state={
        name:'李四 '
    }
    render() {
        let {name}=this.state;
        return(
            <div>
                <h1>我是父组件 </h1>
                <hr/>
                //使用子组件
                <Childer name={name}/>
            </div>
        )
    }
}
//子组件
class Childer extends React.Component{
    render() {
        //name是父传来的属性name
        return(
            <div>
                <h1>我是子组件</h1>
                <h1>父亲的值 {this.props.name}</h1>
            </div>
        )
    }
}
export default Parent;

子传父

import React from "react";
/**
 * 子传父
 */
//父组件
class ZsendfComponentF extends React.Component {
    state={
        gift:'无'
    }
    callbacks=(obj)=>{
        //获取子传的值 obj
        //给父亲设置属性
        this.setState({
            gift: obj
        })
    }
    render() {
        let {gift}=this.state;
        return(
            <div>
                <h1>我是父组件 我的礼物: {gift}</h1>
                //使用子组件
                <ZsendfComponentZ fg={this.callbacks}/>
            </div>
        )
    }
}
//子组件
class ZsendfComponentZ extends React.Component{
    state={
        gift:'iphone13 手机'
    }
    //点击事件
    senl=()=>{
        console.log('开始送...');
        //获取父类传来的方法
        let {fg}=this.props;
        //调用父类的方法 且 带参数传值
        fg(this.state.gift);
    }
    render() {
        return(
            <div>
                <h1>我是子组件</h1>
                <button onClick={this.senl}>送礼</button>
            </div>
        )
    }
}
export default ZsendfComponentF

兄弟传值

思路：先让一个兄弟传值给父亲 然后父亲传给 另外一个兄弟

import React from "react";
/**
 * 父
 * 儿子 ==>女儿
 * 女儿 ==>儿子
 */
class SendParZ extends React.Component {
    state ={
        gift:'',
        geg:''
    }
    //儿子送妹妹
    sonli=(obj)=>{
        this.setState({
            gift:obj
        })
    }
    //妹妹送哥哥
    sge=(obj)=>{
        this.setState({
            geg:obj
        })
    }
    render() {
        return(
            <div>
                <h1>父组件</h1>
                <hr/>
                {/*//儿子*/}
                <Chil1 fn={this.sonli} mlw={this.state.geg}/>
                <hr/>
                {/*//女儿*/}
                <Chile2 gw={this.state.gift} fn2={this.sge}/>
            </div>
        )
    }
}
//儿子
class Chil1 extends React.Component{
    //儿子准备的礼物
    state={
        gift: '布娃娃'
    }
    sli=()=>{
        let {fn} = this.props
        fn(this.state.gift);
    }
    render() {
        return(
            <div>
                <h1>儿子组件</h1>
                <button onClick={this.sli}>送礼给妹妹</button>
                <h1>收到妹妹的礼物：{this.props.mlw}</h1>
            </div>
        )
    }
}
//女儿
class Chile2 extends React.Component {
    //女儿准备的礼物
    state={
        gglw:'小提琴'
    }
    sg=()=>{
        let {fn2}=this.props;
        fn2(this.state.gglw);
    }
    render() {
        return(
            <div>
                <h1>女儿组件</h1>
                <h1>收到哥哥的礼物：{this.props.gw}</h1>
                <button onClick={this.sg}>送鸽鸽礼物</button>
            </div>
        )
    }
}
export default SendParZ

生命周期

构造方法==>组件渲染==>组件挂载==>组件更新==>组件卸载

import React from "react";
/**
 * 生命周期
 */
class Smzq extends React.Component{
    constructor() {
        console.log('1、构造方法')
        super();
        this.state={
            number:1,
            n:0
        }
    }
    dj=()=>{
        this.setState({
            n:this.state.n+1
        })
    }
    render() {
        console.log('2、组件渲染')
        return(
            <div>
                <h1>生命周期</h1>
                {this.state.n>3 ? (<h1>英雄死亡！</h1>) : (<Childer1 num={this.state.n}/>)}
                <button onClick={this.dj}>攻击</button>
            </div>
        )
    }
    //生命周期 在这发送ajax 组件挂载
    componentDidMount() {
        console.log('3、组件挂载')
        setTimeout(()=>{
            this.setState({
                number:10
            })
        },2000)
    }
    //props state更新
    componentDidUpdate() {
        console.log('4、组件更新！')
    }
    componentWillUnmount() {
        console.log('5、卸载时')
    }
}
class Childer1 extends React.Component {
    componentWillUnmount() {
        console.log('5、卸载时')
    }
    render() {
        return <h1>英雄攻击次数:{this.props.num}</h1>
    }
}
export  default  Smzq;

发送ajax请求

import React from "react";
import axios from "axios";
class AjaxComputent extends React.Component{
    state={
        info:[]
    }
    //这里可以写成下面的部分
    ok(){
        if (this.state.info.length===0){
            return <h1>没有数据！</h1>
        }else{
            let mk=this.state.info.map((v)=><h1 key={v}>{v}</h1>);
            return mk;
        }
    }
    //发送请求
    getJoke=() => {
        setInterval(async () => {
            let res = await axios.get('https://autumnfish.cn/api/joke/list?num=3');
            this.setState({
                info: res.data.jokes
            })
        },5000)
    }
    render() {
        return(
            <div>
                <h1>Axios 请求</h1>
                <button onClick={this.getJoke}>获取笑话</button>
                {this.ok()}
                {/*{this.state.info.map((v)=>
                <h1>{v}</h1>
                )} 这样写也可以*/}
            </div>
        )
    }
}



export default AjaxComputent;

路由

下载包

npm i react-router-dom

示例一

import React from "react";
import ReactDOM from "react-dom/client";
import {BrowserRouter as Router,Route,Link,Routes} from 'react-router-dom'
const Main=()=><h1>我是首页</h1>
const Login=()=>(
    <div>
        <h1>这是登入页</h1>
        <input type="text" />
        <button>登入</button>
    </div>
);
const App=()=>(
    <Router>
        <h1>路由测试</h1>
        <ul>
            <li><Link to='/'>首页</Link></li>
            <li><Link to='/login'>登入</Link></li>
        </ul>
        <Routes>
            {/*默认路由 path="/"  */}
            <Route path='/' element={<Main></Main>}></Route>
            <Route path='/' element={<Main></Main>}></Route>
            <Route path={'/login'} element={<Login></Login>}></Route>
        </Routes>
    </Router>
)

export default App;

子路由
自己写

import React from "react";
import {BrowserRouter as Router,Route,Link,Routes,Outlet} from 'react-router-dom'
const Login=()=>(
    <div>
        <h1>这是登入页</h1>
    </div>
)
const Shop=()=>(
    <div>
        <h1>这是商品管理</h1>
        <Link to='/shop/chil'>/chil'>子路由</Link>
        <Outlet></Outlet>
    </div>
)
const ShopInfo=()=>(
    <h1>子路由显示</h1>
)
const Game=()=>(
    <div>
        <h1>这是游戏页</h1>
    </div>
)

const App=()=>(
    <Router>
        <div>
            <ul>
                <li><Link to="/index">首页</Link></li>
                <li><Link to="/shop">商品</Link></li>
                <li><Link to="/game">游戏</Link></li>
            </ul>
        </div>
        <Routes>
            <Route path="/">
                <Route path='/index' element={<Login></Login>}></Route>
                <Route path='/shop' element={<Shop></Shop>}>
                    <Route path='chil' element={<ShopInfo></ShopInfo>}></Route>
                </Route>
                <Route path='/game' element={<Game></Game>}></Route>
            </Route>
        </Routes>
    </Router>
)
export default App