前端框架-React入门

前端框架学习笔记

第十四章 React入门

React介绍

介绍

React是Facebook内部的一个JavaScript类库。

React用于创建Web用户交互界面。

React不是一个完整的MVC框架,只负责MVC中的V(View)视图层,甚至React不认可MVC开发模式。

React的设计思想极其独特,属于革命性创新,性能出众,代码逻辑简单。

React引入了虚拟DOM(Virtual DOM)的机制。

React引入了组件化的思想,一切皆组件。

React使用Facebook专门为其开发的一套语法糖–jsx。

特点

  • 虚拟DOM

  • 组件化

  • JSX语法

优点

  • 组件化开发
  • 引入虚拟DOM,性能好,响应速度快。
  • JSX语法
  • 单向数据绑定
  • 跨浏览器兼容
  • 完善的生态圈和活跃的社区

缺点

  • 不是完整的MVC框架
  • React本身不适合大型项目开发,但是如果要开发大型项目,可以借助react-router-dom、redux实现。

脚手架安装

#安装脚手架
cnpm i create-react-app -g

#创建项目
creeate-react-app reactdemo

#进入项目
cd reactdemo

#启动项目
npm start

目录

-public	服务器目录

​	favicon.ico 	页面图标

​	index.html	页面主入口

​	manifest.json	页面配置文件

-src 	项目源码

​	index.js 	入口文件

​	App.js 	根组件

​	App.test.js	根组件测试

​	index.css	全局css样式

​	App.css	根组件样式

​	serviceWorker.js	离线访问服务

index.js与App.js是最重要的文件,其他文件均可根据需求可有可无。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
import App from './App';
// import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  // React.StrictMode为严格模式
  //
    <App />,
  //,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
// serviceWorker.unregister();

App.js

import React from 'react';
// import logo from './logo.svg';
import './App.css';

var name = '张三'

function App() {
  //return 里返回一段嵌套js的html代码
  return (
  <div className="App">{name}</div>
  );
}

export default App;

语法

React中组件通过function App(){}中return返回,采用的是jsx语法。

()中书写html代码,{}中书写js代码,两者可以相互嵌套。

注释

{/*一段注释*/}

由于()中是html语法,所以不能直接使用//注释。也不能使用{//}注释。

数据绑定

非表单元素

var name ="百度"

name:{name}

媒体元素/属性绑定

var imgUrl = ""



条件渲染

采用三元运算符进行条件渲染

var isShow = true;

{isShow ? 
开启
:
结束
}

列表渲染/循环渲染

var list = [
  {name:"张三",age:18},
  {name:"李四",age:20},
  {name:"王五",age:17}
]

    {list.map((item)=>{ return (
  1. {item.name + ':'+ item.age}
  2. ) })}

动态样式

React中的样式类名用className属性而不是class属性。

动态类名

动态行间样式

这里出现了双大括号,外面的大括号表示js语法,里面的括号表示一个json格式。

这里不能使用以前的写法直接在style属性写样式,比如以下写法是错误的:

事件

箭头函数绑定事件

bind绑定

通过bind绑定,bind第一个参数是this。

事件传参

箭头函数绑定事件传参直接传

bind绑定事件第一个参数是this,想传递的参数从第二个开始。

事件对象event

箭头函数绑定事件的event,通过箭头函数的参数传递event,而fun()中接收的位置可以自定义,如下第二个参数是event。

bind绑定事件的event最后一个参数就是event,但是省略不写,接收的时候是最后一个参数接收。

阻止默认事件

jsx接近原生js,不像Vue有修饰符,React中阻止默认事件需要通过原生js的事件对象实现。

注意:React中不能用return false来阻止默认事件。

阻止事件冒泡

也是采用原生js的事件对象实现。

捕获事件

在事件名后加上Capture就是捕获事件。

弹窗案例

import React ,{Component} from 'react'
import '../App.css';
class ClassComponent extends Component{

state={
    hideTag :false,
}
hide(){
  this.setState({
    hideTag : false
  });
}
stopPro(e){
    e.stopPropagation()
}
show(){
    this.setState({
        hideTag:true
    })

}
hide2(e){
    //实现vue中的.self
    // if(e.target.className ==="mask"){
    //     this.hide();
    // }

    //短路实现
    e.target.className === 'mask' && this.hide()
}

rightClick(e){
    e.preventDefault()
}

//有生命周期
render(){
    return (
        // 阻止传播实现弹窗消失
        //    
// // {this.state.hideTag ? ( //
//
//

你确定要删除吗?

//
// // //
//
//
): null} //
//判断是否点击自身实现弹窗消失
this.rightClick(e)}> {this.state.hideTag ? (

你确定要删除吗?

): null}
) } } export default ClassComponent

组件

与Vue一样,React中每个组件,但不同的是React中所有组件都是局部组件,要用需要引入,没有全局组件。

命名

  • 组件名字首字母必须大写
  • 且与vue不同的是,React中组件名字中间出现大写字母是可以的,不需要改成‘-小’写的形式。

定义组件

类定义
import React ,{Component} from 'react'
class ClassComponent extends Component{
    name="张三";
//可以自定函数绑定事件
changeName(name){
    this.name = name;
}
//有生命周期
render(){
    return (
        
这是一个类定义组件
) } } export default ClassComponent

函数定义

函数定义组件相对来说更简单,但是无法绑定事件,也没有生命周期。

import React from "react"
function FunComponent(){
	return (
        
这是一个函数定义组件
) } export default FunComponent

引入使用

import ClassComponent from "./components/ClassComponent"
import FunComponent from "./components/FunComponent"

(
)

函数定义组件与类定义组件的区别

  • 类定义组件有生命周期,而函数定义的组件没有。
  • 类定义组件接收父组件传递的值的this.props,函数定义的组件接收父组件传递的值是props。
  • 类定义组件有state,函数定义的组件没有,state中数据改变会引起页面的重新渲染。

组件通信

父组件向子组件传值

父组件通过自定义属性给子组件传值,函数定义的子组件通过函数参数接收,类定义的组件通过this.props接收。

{/*父组件传值给函数定义的子组件*/}
this.hang(e)}>

{/*父组件传值给类定义的子组件*/}
this.hang(e)}>

{/*类子组件接收父组件传的值*/}

{this.props.data}

{/*函数子组件接收父组件传的值*/} function FunComponent(props){ return (

{props.data}

) }

子组件向父组件传值

父组件通过给子组件绑定自定义属性,值是一个函数,子组件通过this.props或者props触发。

{/*函数定义的子组件 函数接收一个参数props*/}


{/*类定义的子组件*/}


this.hang(e)}>

this.hang(e)}>

你可能感兴趣的:(React,前端,reactjs)