react学习笔记

前端段

已于 2024-03-19 15:32:23 修改

阅读量432

点赞数

分类专栏： react 文章标签： react.js

于 2020-06-19 21:31:58 首次发布

本文链接：https://blog.csdn.net/hkduan/article/details/106737039

版权

react 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

vue: this.$.refs.tag react: 类组件：创建：this.textInput = React.createRef(); 注册到dom: 调用：this.textInput.current.focus();

函数组件: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

前端段

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
react学习笔记

react学习笔记@[TOC]react hook1.引入useStateimport React, { useState } from ‘react’2.//reack hook中的useState实现函数组件状态管理//userState第一个参数是当前状态值，第二个参数是函数。类似于setStatefunction App() { // 1.声明对象类型的状态 let [val, setVal] = useState({ vala: 0, valb: 1,
复制链接

扫一扫