react学习笔记
引入第三方js 到react
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="like_button_container"></div>
<!-- 加载 React。-->
<!-- 注意: 部署时,将 "development.js" 替换为 "production.min.js"。-->
<!-- 加载我们的 React 组件。-->
<!-- <script src="like_button.js"></script> -->
<script type="text/babel">
ReactDOM.render(
<h1> Hello, world!
</h1>, document.getElementById('like_button_container') );
</script>
</body>
</html>
一、@[TOC]react hook
1.引入useState
import React, { useState } from ‘react’
export default function App() {
const [title, setTitle] = useState(‘段慧坤’)
return (
<button onClick={() => setTitle(title+1)}>改名字
)
}
useEffect
useEffect(() => {
//componentDidMount和componentDidUpdate周期的函数体
return ()=>{
//componentWillUnmount周期的函数体
}
});
2.//reack hook中的useState实现函数组件状态管理
//userState第一个参数是当前状态值,第二个参数是函数。类似于setState
function App() {
// 1.声明对象类型的状态
let [val, setVal] = useState({
vala: 0,
valb: 1,
valc: 2
})
// 多次声明
let [vala, setVala] = useState(0)
let [valb, setValb] = useState(0)
let [valc, setValc] = useState(0)
return <div>
{/* 使用数据{val} */}
使用数据{vala}-----{valb}-----{valc}
<button onClick={() => { setVal(vala + 1) }}>点击修改数据</button>
</div >
}
二、类的说明:
class类里面的静态方法和属性是挂载到constructor里面
实例方法是挂载到原型对象上,通过prototype可以访问
1,对象方法是可以通过实例被调用的,无论是类内的属性方法或者是原型方法构造的属性方法。对象方法放在prototype原型对象里面。可以通过对象.prototype访问。
2,类方法(类方法也叫静态方法)不能通过实例被调用,可以通过类名"."类方法()的模式调用。 类方法放在constructor里面
三、两种组件
1.函数组件(无状态组件)
没有state,没有生命周期
2.class类组件(有状态组件)
有state,有生命周期,有render()
export default class Counter extends Component {
constructor(props) {
super(props)
this.state = {}
}
3.问题生命时候使用有状态,什么时候使用无状态组件?
1.如果组件需要存放私有数据,就使用有状态。
2.如果组件只需要根据外面的props就可以用无状态。无状态组件由于剔除了生命周期,所以运行效率会快一丢丢。
四、属性扩散
{…item} = user={item.user} content={item.content} 属性扩散
五、行内样式,需要2层花括号
如果是sass,先安装npm node-sass -D
import app from ‘…/app.module.scss’
全局的样式,用:global(css类名)包裹起来
七、组件默认的props
static defaultProps = {
initcount: 0, // 如果外界没有initcount,默认是0
}
定义组件的类型
import ReactTypes from ‘prop-types’
static propTypes = {
initcount: ReactTypes.number, // 使用prop-type包,定义initcount为number类型
}
this.state.val = props.val
this.setState({
val:this.state.val+1
})
八、箭头函数this
window.setTimeout(()=>{},delay)
btn.οnclick=()=>{}
九、ref
函数组件:const inputRef = useRef(null);
inputRef.current.focus();
十、修改create-react-app创建项目端口号
在node_modules/react-scripts/scripts/start.js文件中修改默认端口号3000。麻烦的是每次都要去改,因为它会变回3000。
十一、v-model
vue: 此时mes值就与input的值进行双向绑定
react:readOnly
onChange
this.setState({
// 获取文本框最新文本的三种方式
// 1.使用document.getElementById
// 2.使用refs
// msg: this.refs.txt.value,
// 3. 通过e.target.value获取,e.target表示触发事件的事件源
msg: e.target.value,
})
十二、组件传值
父子组件
vue:普通属性用props传递,方法用this.$emit('方法名')
react: 直接用props可以调用属性和方法,this.props.reload()
爷孙组件
context
兄弟组件 npm install event -save
react-redux
pubsub.js
十三、router
import React, { Component } from ‘react’
// 第一步安装yarn add react-router-dom
// 第二步,导入路由模块
import { HashRouter, Route, Link } from ‘react-router-dom’
//说明:1.hashrouter表示一个路由的跟容器,所有路由相关的东西,都包裹在hashRouter里面,而且一个网站只需使用一次hashRouter
// 2.router表示路由规则,有2个比较重要的属性,path component
// 类似vue中:
// var router = new VueRouter({
// routes: [
// {path:“,component”}
// ]
// })
// 3.link表示路由的链接,类似vue中的
import Home from ‘./components/Home’
import Movie from ‘./components/Movie’
import About from ‘./components/About’
export default class App extends Component {
render() {
return (
// 当使用把div根元素包裹起来,就代表启用路由
这是网站APP的根组件
首页—
电影—
关于
{/* 在vue中有个router-view占位符,但是react中不用,route本身就是占位符 /}
{/ exact表示精确匹配 */}
)
}
}
movie组件的代码:
import React, { Component } from ‘react’
export default class Movie extends Component {
constructor(props) {
super(props)
this.state = {
routeParams: props.match.params,
}
}
render() {
return (
//this.props.match.params.XXX访问路由规则的参数
Movie—
{this.state.routeParams.type}—
{this.props.match.params.id}
)
}
}
十四、ant UI
cnpm i antd -S
按需引入:
1.yarn eject //暴露配置文件
2. cnpm install babel-plugin-import --save-dev
3.修改 package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
},
如果报错:Error: Cannot find module '@babel/core',那么
两种解决方案:
回退低版本
npm install -D babel-loader@7 babel-core babel-preset-env
更新到最高版本:
npm install -D babel-loader @babel/core @babel/preset-env webpack
4.配置完后可直接导入 antd 的组件,不再需要另外引入css样式;
import { Button } from 'antd';
十五、React.Fragment
<React.Fragment> 与 <>区别
React.Component
React.memo