欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react

程序员文章站 2022-07-02 23:46:02
...

一、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、安装脚手架
react
2、创建项目
本地创建一个项目文件夹,cmd命令切换到文件夹所在的目录,输入创建项目命令create-react-app reactdemo
react
react
3、运行文件
切换到项目目录中,然后cnpm start 或者yarn start 运行,运行后说明项目创建成功~
命令:cnpm run build 或者yarn build 生成项目
react
react
4、修改端口
node_modules->react-script->scripts->start.js
react
5、react代码提示
1)下载typings插件
2)ctrl+,,搜索settings,加入代码

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

3)ctrl+,,搜索@tag:usesOnlineServices,勾选
react
三、组件
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()
react
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

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;

react
非父子之间的传值之后再~