React基础使用

ゞ浴缸里的玫瑰 2023-01-06 04:21 120阅读 0赞

> 本章讲解了数据类型规则限制,创建脚手架项目,以及三大属性,props,state,ref

## React基础使用 ##

在Nodejs的环境下面，打开控制台，使用npm或yarn去安装脚手架

> $ npm install create-react-app -g

或者

> $ yarn add create-react-app -g  
> yarn常用命令  
> $ yarn init \# 初始项目  
> $ yarn add \# 安装某一个包  
> $ yarn remove \# 移除某一个包  
> $ yarn /yarn install \# 根据项目下面的package.json安装依赖

**创建项目**

> $ create-react-app 项目名称

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70][]

`1`.public是公开文件夹  
`2.`src目录是开发目录

*  index.js是整个程序的启动目录，也是webpack的入口文件
 *  index.css是程序程序的公共CSS文件，如果需要写公共CSS文件最好写在这里
 *  App.js是根组件，在React里面，这就是一个根组件，React的组件是以JS文件的形式存在
 *  App.css是App.js组件的样式，一般情况下，一个JS文件会对应一个CSS文件
 *  serviceWorker.js是在开发React的时候启动的http服务器

## 组件三大属性(state,props,refs) ##

简单提一下React的事件绑定使用驼峰法例如:`onClick`,`onBlur`

#### state ####

> 1.首先需要注意里面的`this`指向,常用箭头函数来解决  
> 2.修改状态,状态不可直接更改,要借助`React`的内置API`setState`

自定义方法的写法`speak=()=>{this.setState({})}`**注意**setState里面接收对象,如果是数组还得根据索引去找,对象直接根据key去找

#### props(只读) ####

const p={ name:'tom',age:'18'}//请求回来的数据
    ReactDOM.render(<Person  { ...p}/>,document,getElementById('test))
    //想要得到标签中的属性
    { this.props.name}//tom
    { this.props.age}//18

用于对标签属性进行限制

*  引入prop-types 文件

//数据规则
    static propTypes={ 
    	name:PropTypes.string.isRequired //isRequired必填项,
    	sex:PropTypes.string
    	age:PropTypes.number
    	speak:PropTypes.Function//限制speak是函数
    }
    //默认值
    static defaultProps={ 
    	sex:'男' //限制默认值为男
    	age:18
    }

#### refs ####

字符串形式的ref(不推荐因为过时了)

class Demo extends React.Component{ 
    	showData=()=>{ 
    		console.log(this.refs.input1)//input1当前节点
    		const { input1}=this.refs//解构
    	}
    	render(){ 
    		return (
    			<div>
    				<input ref='input1' type='text' />
    			<div/>
    		)
    	}
    }

回调函数形式的ref

class Demo extends React.Component{ 
    	showData=()=>{ 
    		const { input1}=this//解构
    		console.log(input1.value)//input1节点的内容
    	}
    	render(){ 
    		return (
    			<div>
    				<input ref={ (c)=>{ console.log(c)}} type='text' />//参数c就是当前节点
    				<input ref={ curNode=>this.input1=curNode} type='text' />//回调函数的简写
    			<div/>
    		)
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]: /images/20221119/ca72067d2024468a9f7b95dc3b40aa8b.png