React三大体系
React搭建
- 安装node
- Node中文网址:http://nodejs.cn/ (建议你在这里下载,速度会快很多)
- 安装
create-react-app
1
npm install -g create-react-app
create-react-app
新建demo11
create-react-app demo1
1 | Inside that directory, you can run several commands: |
目录基本介绍
index.js 入口文件
1
import * as serviceWorker from './serviceWorker'; // 用于PWA
public > manifest.js 用于PWA
HellowWorld和组件
进入src新建index.js入口文件
1
2
3
4
5import React from 'react';
import ReactDom from 'react-dom';
import App from './app';
ReactDom.render(<App />,document.getElementById('root'));编写App组件 进入src新建 app.js
1
2
3
4
5
6
7
8
9
10import React,{Component} from 'react'; // {Component} 解构赋值 等同于 const Component = React.Component
class App extends Component{
render(){
return(
<div>Hello 子小</div>
)
}
}
export default App;
JSX语法简单介绍
JSX就是 Javascript 和 XML 的组合 是react定义的,可以方便的利用HTML语法来创建虚拟DOM,,可以方便的利用HTML语法来创建虚拟DOM,
通俗理解为 遇到 <
解析 为html,遇到{
解析为js
1 | import React,{Component} from 'react'; // {Component} 解构赋值 等同于 const Component = React.Component |
==jsx的class必须写成className==
reacts使用js创建html标签
1 | import React,{Component} from 'react'; // {Component} 解构赋值 等同于 const Component = React.Component |
子小爱好菜单
新建一个 Like.js
1 | import React, { Component,Fragment } from 'react'; |
==Fragment
标签用来包裹元素,类似于vue的template标签==
加上最外层的DIV,组件就是完全正常的,但是你的布局就偏不需要这个最外层的标签怎么办?比如我们在作Flex布局的时候,外层还真的不能有包裹元素。这种矛盾其实React16已经有所考虑了,为我们准备了
标签。
input的赋值绑定
- 响应式设计和数据绑定
React
不建议你直接操作DOM
元素,而是要通过数据进行驱动,改变界面中的效果。React会根据数据的变化,自动的帮助你完成界面的改变。所以在写React代码时,你无需关注DOM相关的操作,只需要关注数据的操作就可以了(这也是React如此受欢迎的主要原因,大大加快了我们的开发速度)。
现在的需求是增加小姐姐的服务项,就需要先定义数据。数据定义在Like
组件中的构造函数里constructor
。1
2
3
4
5
6
7
8// js的构造函数,由于其他任何函数执行
constructor(props){
super(props)
this.state = {
inputValue: '123', // input的值
list:[]
}
}
1 | /* eslint-disable react/no-direct-mutation-state */ |
JSX防踩坑的地方
关于注释
{/*第一次注释*/}
1
2
3
4<Fragment>
{/* 第一次注释 */}
<div className="likewrap"></div>
</Fragment>
关于class
必须使用 className
1 | <button className="lwc-button">增加</button> |
####### 关于html标签
解析的问题
1 | <li className="lw-item" key={index + item} onClick={this.deleteItem.bind(this, index)} dahngerouslySetInnerHTML={{__html:item}}></li> |
关于laber 的for
必须使用htmlFor
因为会和js中的for
冲突 所以更换了名称
1 | <label htmlFor="likeinput"></label> |
Simple React Snippets插件的使用
Vscode插件搜索Simple React Snippets,点击安装,即可使用,常用快捷键如下:
Snippet | Renders |
---|---|
imr |
Import React |
imrc |
Import React / Component |
impt |
Import PropTypes |
impc |
Import React / PureComponent |
cc |
Class Component |
ccc |
Class Component With Constructor |
sfc |
Stateless Function Component |
cdm |
componentDidMount |
cwm |
componentWillMount |
cwrp |
componentWillReceiveProps |
gds |
getDerivedStateFromProps |
scu |
shouldComponentUpdate |
cwu |
componentWillUpdate |
cdu |
componentDidUpdate |
cwu |
componentWillUpdate |
cdc |
componentDidCatch |
gsbu |
getSnapshotBeforeUpdate |
ss |
setState |
ssf |
Functional setState |
ren |
render |
rprop |
Render Prop |
hoc |
Higher Order Component |
1 | // Simple React Snippets 插件 |
component组件拆分
新建likeItem.js
组件
1 | import React, { Component } from 'react'; |
在likeItem.js
组件引入
1 | import LikeItem from './LikeItem' |
父子传值
父组件
1 | { |
子组件
1 | import React, { Component } from 'react'; |