React-基础语法

最新推荐文章于 2023-12-06 17:57:24 发布

缘明随心

最新推荐文章于 2023-12-06 17:57:24 发布

阅读量1.1k

点赞数 2

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_34182705/article/details/107793454

版权

React 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

React-基础语法

React---搭建脚手架

React—搭建脚手架

安装node.JS

参考这个博客

安装React脚手架

npm install create-react-app -g; 全局安装react脚手架

创建项目

create-react-app 项目名字; 创建项目

运行项目

cd 创建的项目文件 进入创建的项目文件
npm start 运行项目

其他命令

npm build 压缩，打包
npm test 测试
npm eject 暴露配置文件
- 肯能需要npm init—初始化

使用VSCode----安装插件

基础插件

Chinese 简体中文
ESLint 检测js语法
ES7 React/Redux/... 语法提示(React)
Live Server 本地服务器

文档目录结构

node_modules 包安装目录
public 静态资源目录
src 项目资源目录
- index.js 项目的入口js文件
- index.css 项目的全局css文件
- App.js 根组件
- App.css 根组件样式
- App.test.js 根测试文件
- logo.svg logo图片
- setupTests.js 测试文件
- serviceWorker.js 离线服务
package.json 项目包管理配置文件
package-lock.json 配置锁定文件
README.md 项目说明文件
.gitignore git忽略文件

注意：在React中，每一个js文件都是一个组件

根组件App.js—解析

React使用JSX语法
参考博客
单标签必须自封闭

<br />

// 导入react
import React from 'react';
// 导入logo图片
import logo from './logo.svg';
// 导入组件的css文件
import './App.css';


// 函数App 是一个组件（函数组件---无状态组件）
function App() {
  // 返回的是一个JSX语法的组件布局
  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
    </div>
  );
}

// 导出默认的 App组件
export default App;

组件解析

类组件（有状态组件）

cccs + tab键快捷生成类组件

// 类组件     快捷键---cccs
class App extends Component {
  constructor(props) {
    // 重载属性
    super(props);
    // 状态
    this.state = {}
  }
  // 构造函数
  render() {
    // render 渲染函数
    return (
      <div>
        <h1>你好React</h1>
      </div>
    );
  }
}

// 导出

函数组件

// 函数组件使用较多
function App(props) {
  // 返回的是一个JSX语法的组件布局
  return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
    </div>
  );
}

JSX语法

html布局相关

只能有一个根节点—与vue一样每个组件都只能有一个根节点

 // 构造函数
  render() {
    // render 渲染函数
    return (
		// 这里只能有一个div，只能有一个根节点，与vue的一样
      <div>
        <h1>你好React</h1>
      </div>
    );
  }

css样式相关

定义类名的时候使用className
定义css样式的时候需要导入css文件import 'css样式文件地址'

// 导入css文件
import './App.css';
// 函数App 是一个组件
function App() {
// 返回的是一个JSX语法的组件布局
   return (
     <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
     </div>
   );
}

js行为相关

在一个{}中写入js语法—任何的js语法，但是只能写一句

// 类组件     快捷键---cccs
class App extends Component {
  constructor(props) {
    // 重载属性
    super(props);
    // 状态
    this.state = {
      flag : true,
      mystyle : {"fontSize" : "40px" , "color" : "red"}
    }
  }
  // 构造函数
  render() {
    // render 渲染函数
    return (
      <div>
        <h1>你好React</h1>
        <h3>{ 0.2 + 0.1 }</h3>
		// this.state.flag 是类组件调用数据的方法，跟vue的很想
        <h3>{ this.state.flag ? "真的" : "假的" }</h3>
		// 
        <h3 style={this.state.mystyle}>红色，40px</h3>
        <h3>{ 0.2 + 0.1 }</h3>
      </div>
    );
  }
}

JSX的嵌套—也是只能有一个根节点

class App extends Component {
  constructor(props) {
    // 重载属性
    super(props);
    // 状态
    this.state = {
      flag : true,
      mystyle : {"fontSize" : "40px" , "color" : "red"}
    }
  }
  // 构造函数
  render() {
    // render 渲染函数
    return (
      <div>
        <div>
          {
            <h1> 你好第一层<br/>
              <p>你好第二层<br/>
                {this.state.flag ? <p style={mystyle}>第三层</p> : ""}
              </p>
            </h1>
          }
        </div>
      </div>
    );
  }
}

JSX数组相关

数组的展开

JSX中，每一个html标签都是一个对象

 // 构造函数
  render() {
    let arr = [
      <h2>html</h2>,
      <h2>vue</h2>,
      <h2>react</h2>
    ];
    // render 渲染函数
    return (
      <div>
        {/* 数组 */}
        {arr} <br/>
      </div>
    );
  }

数组的映射

 // 构造函数
  render() {
    let list = ["学会前端","找工作","找对象","买个房子","结婚"];
    // render 渲染函数
    return (
      <div>
        {/* 数组映射 */}
        {list.map( (item,index) => { return <h1 key={index}>{index + 1} : {item}</h1>})
      </div>
    );
  }

组件

创建components文件夹
创建对应组件的文件夹
- 创建index.js文件

函数组件—无状态组件

定义组件


// 导入组件文件
import React, { Component } from 'react'
// 函数组件
function Child() {
    return (
      <div>
        <h1>child组件</h1>
      </div>
    )
}
// 导出child组件
export default Child;

使用组件

// 导入Child组件
import Child from './components/Child'

// 使用组件
// 构造函数
render() {

// render 渲染函数
return (
  <div>
	{/* 调用组件 */}
	<Child></Child>
  </div>
);
}

类组件—有状态组件

imrc 快捷键可以，快捷导入components组件
cccs 快捷键可以，快捷创建类组件

创建组件


// 导入组件
import React, { Component } from 'react';
// 类组件
class Son extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div>
                <h2>Son的组件</h2>
            </div>
        );
    }
}
// 导出son组件
export default Son;

使用类组件

// 导入Son组件
import Son from './components/Son/';

// 构造函数
render() {

// render 渲染函数
return (
	  <div>
		{/* 调用son组件 */}
		<Son></Son>
	  </div>
	);
}

组件的导入简写

文件的index文件可以省略
在components文件夹里面创建index文件
在components文件夹的index文件中导入components文件夹中所有的组件，在全部导出

// 导入
import Son from './components/Son'
import Child from './components/Child'

// 导出
export {Son , Child}

之后我们就可以在使用是，调用components中的index就行了，简单，快捷

// 导入所有组件
import {Son,Child} from "./components"
// 使用组件
正常使用就行

类组件状态—`state`

函数组件没有state
state的使用与小程序的data基本一致，与vue的使用差不多

设置state

class Son extends Component {
constructor(props) {
	super(props);
	this.state = { 
		name : "momo",
		age : 18
	 };
	 // state 组件的状态 数据 （函数组件没有）
}

调用state

调用时因为是构造函数的一个方法或者数据存储器
所以：this.state.定义的属性

<h2>姓名：{this.state.age}</h2>

设置state

设置的方法与小程序一致
都需要使用：this.setState({ 需要设置的属性名字 : 设置的属性值 })

<h2>姓名：{this.state.age}</h2>
	<button onClick={ () => {
		this.setState({
			age : this.state.age+1
		})
	}}>长大了一年</button>
</div>

组件传参—父传子—props属性

props属性只读，单项数据流
一般都是父组件传递过来的
如果想要更改props，可以将数据定义到组件自己的state中，
跟vue一样，vue虽然可以更改父组件传递的参数，但是不建议直接修改父组件的参数

函数组件

props.传递的数据调用

传递参数

<!-- 传递 -->
<!-- {/* 调用组件 */} -->
<Child money="100"></Child>

接收参数

// 函数组件
// props 接收所有传递过来的参数
function Child(props) {
    return (
      <div>
        <h1>child组件</h1>
		// 调用 
        <h1>{props.money}</h1>
      </div>
    )
}
/
// 或者
// 这样可以设置money的初始值为1
// 只用于函数组件
function Child(money=1) {
    return (
      <div>
        <h1>child组件</h1>
		// 调用 
        <h1>{props.money}</h1>
      </div>
    )
}

类组件—props

‘’

传递参数

<!-- {/* 调用son组件 */} -->
 <Son num="5"></Son>

接收参数

 {this.props.num}

设置默认props值


// 导入组件
import React, { Component } from 'react';

class Son extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            name : "momo",
            age : 18
         };
         // state 组件的状态 数据 （函数组件没有）
         // props 组件的属性
    }
    render() {
        return (
            <div>
                <h2>Son的组件</h2>
                <h2>姓名：{this.state.name}</h2>
                <h2>姓名：{this.state.age}</h2>
                <button onClick={ () => {
                    this.setState({
                        age : this.state.age+1
                    })
                }}>长大了一年</button>
                {this.props.num}
            </div>
        );
    }
    static defaultProps = {money : 10};
}
// 导出son组件
export default Son;

子传父

子组件使用props动态设置传递的参数值

 {/* 子组件给父组件传递参数fun，使用props.fun动态添加参数 */}
<h1 onClick={ () => props.fun('I Love React')}>点击触发父组件的事件</h1>

父组件在子组件标签上接收传递的参数

// 这个是定义在render函数之外的
 showMsg = msg =>  {alert(msg);}
{/* 父组件接收fun,调用父组件自己的showMsg事件 */}
<Child  fun={this.showMsg}></Child>

事件

事件驼峰写法onClick, onShow

响应三种写法
- {this.show} 函数this指向当前元素
- {this.show.bind(this,参数)} 函数this指当前的类
- {()=>this.show(参数)} 函数this指向当前组件
定义事件函数
- show(arg){}
- show=(arg)=>{} 函数this指向当前组件

类，样式

写法基本与vue相差不大
{类名 : 判断条件如果是真的就添加类名否则就删除类名，不添加,...}

略	用法与vue一样，具体可参考

参考Vue的Class与Style的用法

条件渲染

{三目法则}

{this.state.flag ? "你好" : "hello"}

&&符号

Refs的使用

获取dom节点元素

<!-- 定义ref -->
<div ref="inp">你好</div>

// <!-- 获取dom元素 -->
<div onClick={ () => {
	this.refs.inp.value = "我爱国家！";
}}><>

表单的双向绑定

推荐使用onChange事件，onInput事件会报红

// 定义数据
 // 状态
this.state = {
  msg : "你好"
}
 {/* 双向绑定 */}
<input type="text" 
  value={this.state.msg}
  onChange={ (e) => {
	this.setState({msg : e.target.value})
  }}
/>
<p>{this.state.msg}</p>