react

最新推荐文章于 2024-08-05 23:19:25 发布

不归少年

最新推荐文章于 2024-08-05 23:19:25 发布

阅读量401

点赞数

本文链接：https://blog.csdn.net/Wang_jiao_yaa/article/details/104323307

版权

一、react开发环境搭建

1、安装nodejs （安装nodejs稳定版本）
https://nodejs.org/dist/v8.11.2/node-v8.11.2-x64.msi
odejs.org/dist/v8.11.2/node-v8.11.2-x86.msi）
2、安装好node之后在cmd检查版本 node –v 在安装完node之后npm页会自动安装检查版本 npm –v
3、安装cnpm 代替npm
4、检查版本 cnpm –v
5、安装yarn 5）npm install –g yarn依赖工具（https://yarn.bootcss.com/）
6、检查yarn的版本 yarn –v

二、创建react开发环境
1、安装脚手架
在这里插入图片描述
2、创建项目
本地创建一个项目文件夹，cmd命令切换到文件夹所在的目录，输入创建项目命令create-react-app reactdemo

3、运行文件
切换到项目目录中，然后cnpm start 或者yarn start 运行，运行后说明项目创建成功~
命令：cnpm run build 或者yarn build 生成项目
在这里插入图片描述

4、修改端口
node_modules->react-script->scripts->start.js

5、react代码提示
1）下载typings插件
2）ctrl+，，搜索settings，加入代码

"emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },

3）ctrl+，，搜索@tag:usesOnlineServices，勾选
在这里插入图片描述
三、组件
1、创建组件
第①种写法 React.Component

import React from 'react';
class Header extends React.Component {
    render() {
        return <div > 我是组件 </div>
    }
}
export default Header;

第②种写法 Component
这里需要注意：render()是给页面渲染元素的，如果有多个元素，里面用括号，并且括号里面只能有一个父元素，className是类名称

import React,{Component} from 'react';
class Header extends Component{
    // 给页面渲染元素的，如果有多个元素，里面用括号，并且括号里面只能有一个父元素
    render(){
        return (
            <div className="Header">
                <div>我是组件</div>
                <div>我是组件</div>
                <div>我是组件</div>
            </div>
        )
    }
}
export default Header;

2、组件挂载

1）import引入组件
2）<变量></变量> 首字母需要是大写的

import React from 'react';
import './App.css';
import Header from './component/header'

function App() {
  return (
    <div className="App">
     开始学习
     <Header></Header>
    </div>
  );
}

export default App;

3、在组件中声明数据

1、在类中声明构造函数
2、在构造函数中声明super()

3、定义数据
4、使用{}绑定数据

import React,{Component} from 'react';
class Header extends Component{
     //声明类的构造函数
     constructor(){
        super();
        //React 定义数据
        this.state={
            name:"张三",
            age:"20",
            userdata:{
                user:"猜猜"
            }
        }}
    // 给页面渲染元素的，如果有多个元素，里面用括号，并且括号里面只能有一个父元素
    render(){
        return (
            <div className="Header">
                {/* 数据的绑定 */}
                <p>姓名：{this.state.name}</p>
                <p>年龄{this.state.age}</p>
                <p>object：{this.state.userdata.user}</p>
            </div>
        )
    }
}
export default Header;

4、绑定数据、属性、类等—数组循环图片src

改变：
<标签 key=“索引”> {数据} <标签>
1)class---->className
2) label for ---->htmlFor
3) img src---->require() 或者import或者动态绑定图片的src不能直接写路径（远程图片直接写远程路径）
4）如果只获取数据，对于数组可直接{.数组名}

// import React from 'react';
// class Header extends React.Component {
//     render() {
//         return <div > 我是组件 </div>
//     }
// }
// export default Header;

import React,{Component} from 'react';
// import header from 'header.css'
class Header extends Component{
     //声明类的构造函数
     constructor(){
        super();
        //React 定义数据
        this.state = {
            arr: [1, 2, 3, 4, 5, 6],
            obj: [
                {
                    "name": "张三",
                    "hobby": ["篮球", "足球"]
                },
                {
                    "name": "李四",
                    "hobby": ["篮球"]
                },
                {
                    "name": "王五",
                    "hobby": ["乒乓球"]
                }
            ],
            //加载图片使用远程路径
            // imgsrc:"http://localhost:3000/image/logo192.png"
            // imgsrc:"./image/logo192.png",
            title:"react 图片",
            imgclass:"imgroud",
            isadd:false,
            isstyle:{
                width:"3rem",
                height:"3rem",
                backgroundColor:"red",
                margin:"auto"
            },
            //数组里面直接生成标签
            ele:[<div>1</div>,<div>2</div>,<div>3</div>]
        };}
    // 给页面渲染元素的，如果有多个元素，里面用括号，并且括号里面只能有一个父元素
    render(){
        return (
            <div className="Header">
                <p>数组绑定方式</p>
                <div>
                    {
                        this.state.arr.map((val, index) => {
                            return <span key={index}>{val}</span>
                        })
                    }
                </div>

                <p>对象的绑定</p>
                <div>
                    {
                        this.state.obj.map((val, index) => {
                            if (index % 2 === 0) {
                                return (<p key={index}>
                                    姓名：<span>{val.name}</span>:
                                爱好：{
                                        val.hobby.map((cl, cindex) => {
                                            return (
                                                <span key={cindex}>{cl}</span>
                                            )
                                        })
                                    }
                                </p>)
                            }
                            else{
                                return ''
                            }
                        })
                    }
                </div>


                <p>样式的绑定</p>
                <div style={this.state.isstyle}>
                    这里绑定样式
                </div>
                 {/* 动态绑定样式  */}
                <div style={{'color':'red','fontSize':'1.2rem'}}>动态样式</div>
                <label htmlFor="name"></label>

                <p>动态渲染标签数据</p>
                {
                    this.state.ele
                }
                {
                    this.state.ele.map((val,index)=>{
                        return (
                            <div key={index}>{val}</div>
                        )
                    })
                }
                <p>图片绑定：</p>
                <img className={this.state.isadd?this.state.imgclass:'imgcir'} src={require('../../image/1.jpeg')} title={this.state.title} alt=""/>
        </div>
        )
    }
}
export default Header;

5、事件方法

操作this指针三种方法

① 普通函数 this.getmsg.bind(this)

class Footer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: "消息",
            value: 0,
            ck: [
                { ck: true, name: "篮球" },
                { ck: true, name: "足球" },
                { ck: true, name: "羽毛球" }
            ]
        };
    }
    getmsg() {
        console.log(this.state.msg);
    }
<button onClick={this.getmsg.bind(this)}>事件</button>

②es6函数this.getData

class Footer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: "消息",
            value: 0,
            ck: [
                { ck: true, name: "篮球" },
                { ck: true, name: "足球" },
                { ck: true, name: "羽毛球" }
            ]
        };
    }
    getData = () => {
        console.log(this.state.msg);
    }
<button onClick={this.getData}>事件</button>

③this.getinfo = this.getinfo.bind(this) this.getinfo;

class Footer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: "消息",
            value: 0,
            ck: [
                { ck: true, name: "篮球" },
                { ck: true, name: "足球" },
                { ck: true, name: "羽毛球" }
            ]
        };
        this.getinfo = this.getinfo.bind(this);
    }
    getinfo() {
        console.log(this);
    }
<button onClick={this.getinfo}>事件</button>

事件传参

最后一个参数默认为事件的执行参数

    send(a,b,e) {
        console.log(a,b,e);
    }

    <button onClick={this.send.bind(this, 1, 2)}>事件的传递参数</button>

在这里插入图片描述

react获取dom元素 ref

    getele() {
        console.log(this.refs.name);
        this.refs.name.innerHTML = "你好";
    }

      <div ref='name'>ref获取元素</div>
      <button onClick={this.getele.bind(this)}>获取元素</button>

数据双向绑定

    //react 中表单以及数据双向绑定
    getchange(e) {
        //修改state上的数据
        let val = e.target.value;
        this.setState({
            value: val
        });
    }
<p>下面实现数据绑定+数据双向</p>
<p>{this.state.value}</p>
<input value={this.state.value} onChange={this.getchange.bind(this)}/>

结合多选框

    getcheck(index,e){
        console.log(index);
        let ckeckinfo= [...this.state.ck];
        ckeckinfo[index].ck=!ckeckinfo[index].ck;
        this.setState({
            ck:ckeckinfo
        });
        let ele=e.target;
        console.log(ele.value);
    }

                <p>下面实现数据绑定+数据双向 +使用复选框实现</p>
                <ul>{
                    this.state.ck.map((val, index) => {
                        return (
                            <li key={index}><input onChange={this.getcheck.bind(this,index)} type='checkbox' value={val.name} checked={val.ck} />{val.name}</li>
                        )
                    })
                }
                </ul>

React获取表单元素设置表单元素
限制性约束:（select,input,checkbox,textarea）,需要通过onChange()动态监听
非限制性约束：defaultvalue 相当于原生的value

import React from 'react';
class Fromtxt extends React.Component{
    constructor(){
        super();
        this.state={
            //获取一个人的信息
            name:"",
            sex:0,
            city:"",
            citys:[
                "宝鸡",
                "西安",
                "延安"
            ],
            hobby:[
                {title:"篮球",check:false},
                {title:"足球",check:true},
                {title:"羽毛球",check:false}
            ],
            content:""
        }
    }
    //设置姓名的方法
    setName=(e)=>{
        //通过事件对象获取当前的dom操作节点
        //页可以通过refs
       this.setState({
        // name:e.target.value
        name:this.refs.username.value；
       });
    }
    //设置性别的方法
    setSex(e){
        this.setState({
            sex:parseInt(e.target.value)
        });
    }
    //设置下拉菜单的值
    setCity=(e)=>{
        this.setState({
            city:e.target.value
        });
    }
    //设置兴趣爱好
    setHobby=(key)=>{
        let hobby=this.state.hobby;
        hobby[key].check=!hobby[key].check;
        this.setState({
            hobby:hobby
        });
    }
    //设置备注
    setContent=(e)=>{
        this.setState({
            content:e.target.value
        });
    }
    // 表单提交的方法
    handleSubmit=(e)=>{
        console.log(this.state.name+"/"+this.state.sex+"/"+this.state.city+"/"+this.state.hobby+"/"+this.state.content);
        //阻止事件的提交   阻止事件的默认行为
        e.preventDefault();
    }
    render(){
        return (
            <div>
                我是表单组件
                <br/>
                <br/>
                <form onSubmit={this.handleSubmit}>
                    <ul>
                        <li>姓名：<input ref="username" type="text" value={this.state.name} onChange={this.setName}/></li>
                        <li>性别：<input type="radio" value="0" checked={this.state.sex===0} onChange={this.setSex.bind(this)}/> 男
                        <input type="radio" value="1" checked={this.state.sex===1} onChange={this.setSex.bind(this)}/> 女</li>
                        <li>城市：
                            <select value={this.state.city} onChange={this.setCity}>
                                {
                                    this.state.citys.map(function (value,key){
                                        return <option  key={key}>{value}</option>
                                    })
                                }
                            </select>
                        </li>
                        <li>
                            兴趣：
                            {
                                //这里得注意this的指向 使用箭头函数修改this指向 保持上下文this统一
                                this.state.hobby.map((value,key)=>{
                                    return (
                                       <span key={key}>
                                                <input type="checkbox" onChange={this.setHobby.bind(this,key)} checked={value.check} /> {value.title}
                                       </span>
                                    )
                                })
                            }
                        </li>
                        <li>备注：
                            <textarea value={this.state.content} onChange={this.setContent}></textarea>

                        </li>
                    </ul>
                    <input type="submit" defaultValue="提交"/>
                </form>
            </div>
        );
    }
}
export default Fromtxt;

6、ToDolist

todolist文件
import React, { Component } from 'react';
import Session from '../../Session/Session';
class ToDo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: "",
            arr: []
        };
    }
    //页面加载完成的声明周期函数
    componentDidMount() {
        let data = Session.getstorgae('user');
        if (data) {
            this.setState({
                arr: data
            });
        }
    }
    sendmsg() {
        this.getData();
    }
    changeinfo(e) {
        this.setState({
            msg: e.target.value
        });
    }
    keyupinfo(e) {
        if (e.keyCode === 13) {
            this.getData();
        }
    }
    getData() {
        let arrlist = this.state.arr;
        let obj = {
            load: false,
            name: this.state.msg
        }
        arrlist.push(obj);
        this.setState({
            arr: arrlist
        });
        //写入缓存
        Session.setstorage('user', JSON.stringify(arrlist));

    }
    checkchange(index) {
        let data = this.state.arr;
        data[index].load = !data[index].load;
        //写入缓存
        Session.setstorage('user', JSON.stringify(data));
        this.setState({
            arr: data
        });
    }
    render() {
        let load = ["未完成：", "已完成："];
        return (
            <div>
                <input type="text" value={this.state.msg} onChange={this.changeinfo.bind(this)} onKeyUp={this.keyupinfo.bind(this)} placeholder="请输入..." /><button onClick={this.sendmsg.bind(this)}>提交</button>
                {
                    load.map((v, k) => {
                        if (k === 0) {
                            return (
                                <div  key={k}>
                                    <p>{v}</p>
                                    {
                                        this.state.arr.map((val, index) => {
                                            if (!val.load) {
                                                return (
                                                    <div key={index}><input type="checkbox" onChange={this.checkchange.bind(this, index)} checked={val.load} />{val.name}</div>
                                                )
                                            }
                                        })
                                    }
                                </div>
                            )
                        }
                        else {
                            return (
                                <div key={k}>
                                    <p>{v}</p>
                                    {
                                        this.state.arr.map((val, index) => {
                                            if (val.load) {
                                                return (
                                                    <div key={index}><input type="checkbox" onChange={this.checkchange.bind(this, index)} checked={val.load} />{val.name}</div>
                                                )
                                            }

                                        })
                                    }
                                </div>
                            )
                        }
                    })
                }

            </div>
        );
    }
}

export default ToDo;

session文件
let Session={
    setstorage(key,value){
        sessionStorage.setItem(key,value);
    },
    getstorgae(key){
        return JSON.parse(sessionStorage.getItem(key));
    }
}
export default Session

7、react 封装自定义模块优化代码性能（意思就是将某个功能封装为一个模块在任何组件里面都可以被使用）

//自定义模块的封装
let Storage={
    setStorage(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    getStorage(key){
        return JSON.parse(localStorage.getItem(key));
    },
    removeStorage(key){
        localStorage.removeItem(key);
    }
}
//模块暴露
export default Storage;

8、React中的组件，父子组件，父组件给子组件传值（props），子组件给父组件传值，父组件中通过refs获取子组件的属性和方法
父组件给子组件传值：可以传值，传方法，传整个组件都可以，在子组件里面实现父组件的方法，属性的执行和调用。
子组件给父组件传值：可以借助父组件传方法给子组件，子组件调用方法传参，到父组件的方法当中

父组件
import React , {Component} from 'react'
import Child from './child'
class Main extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            num:"string"
         };
    }
    getData(msg){
        console.log(msg);
    }
    父组件页可以直接获取子组件对象
    给子组件添加属性ref   在父组件里面直接this.refs.name 可以拿到子组件
    componentDidMount(){
        this.refs.child.getonfo();
    }
    render() {
        return (
            <div>
                <p>我是主组件</p>
                <Child ref="child" title={this.state.num} method={this.getData} msg="我是坏小子"></Child>
            </div>
        );
    }
}

export default Main;

子组件
import React, { Component } from 'react'
import PropTypes from 'prop-types'

//子组件里面约束父组件传值的合法性
//import PropsTypes from 'prop-types'
class child extends Component {
    constructor() {
        super();
        this.state = {
            msg: "子组件"
        }
    }
    //挂在完成执行的函数
    componentDidMount() {
        console.log(this.props);
        // this.props.method(this.state.msg);
    }
    getonfo() {
        console.log(2);
    }
    render() {
        return (
            <div>
                子组件
                <p>{this.props.msg}</p>
            </div>
        );
    }
}

defaultProps:父组件传值中，如果父组件调用子组件不传值，可以在子组件中使用
defaultProps定义默认的值；
propTypes:验证传值的合法性；
这两个都是给子组件使用的；
//约束传值的合法性
//传递参数的默认值defaultProps
child.defaultProps = {
    msg: "消息"
}
//约束数据类型protoTypes
child.propTypes = {
    title: PropTypes.string,
    method: PropTypes.func
}

export default child;