React是Facebook内部的一个JavaScript类库。
React用于创建Web用户交互界面。
React不是一个完整的MVC框架,只负责MVC中的V(View)视图层,甚至React不认可MVC开发模式。
React的设计思想极其独特,属于革命性创新,性能出众,代码逻辑简单。
React引入了虚拟DOM(Virtual DOM)的机制。
React引入了组件化的思想,一切皆组件。
React使用Facebook专门为其开发的一套语法糖–jsx。
虚拟DOM
组件化
JSX语法
#安装脚手架
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是最重要的文件,其他文件均可根据需求可有可无。
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();
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 (- {item.name + ':'+ item.age}
)
})}
React中的样式类名用className属性而不是class属性。
这里出现了双大括号,外面的大括号表示js语法,里面的括号表示一个json格式。
这里不能使用以前的写法直接在style属性写样式,比如以下写法是错误的:
通过bind绑定,bind第一个参数是this。
箭头函数绑定事件传参直接传
bind绑定事件第一个参数是this,想传递的参数从第二个开始。
箭头函数绑定事件的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中所有组件都是局部组件,要用需要引入,没有全局组件。
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接收。
{/*父组件传值给函数定义的子组件*/}
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)}>