React入门

React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (reactjs.org)

React入门

React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (reactjs.org)

Vue跟React的异同点

相同点

• 1.都使用了虚拟dom
• 2.组件化开发
• 3.都是单向数据流(父子组件之间，不建议子修改父传下来的数据)
• 4.都支持服务端渲染

不同点

• 1.React的JSX，Vue的template
• 2.数据变化，React手动(setState)，Vue自动(初始化已响应式处理，Object.defineProperty)
• 3.React单向绑定，Vue双向绑定
• 4.React的Redux，Vue的Vuex

Vue小建议

「自我检验」熬夜总结 50 个 Vue 知识点，全都会你就是神！！！ (qq.com)

1. 不需要响应式的数据应该怎么处理？

// 方法一：将数据定义在data之外
data(){// 不需要做响应式处理的数据this.list = {xxxxx}return{}
}
// 方法二：Object.freeze()
data(){return {list1: Object.freeze({xxxxxxx})}
}

2. Key

• 不建议用index做key

• 不建议用随机数做key

3. 数据结构

• new Map();
• new Set();

React 教程

1、安装React

CDN

<!--  引入react核心库-->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom-->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转换为js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 一定要写babel
// 编写jsx语法
</script>
<!-- 用于props的类型校验 -->
<script src=https://cdn.staticfile.org/prop-types/15.5.10/prop-types.js ></script>

脚手架安装

# npx
npx create-react-app my-app
cd my-app
npm start# ts
yarn create react-app my-app-ts --template typescript# 全局安装
npm i -g create-react-app

2、类的基础知识

2.1 类的基础知识

// 基础知识
class Person {constructor(name, age) {this.name = namethis.age = age}study() {console.log(this) // this 指向的是实例对象console.log('我在学习')}
}
const p1 = new Person('张三', 18);
const p2 = new Person('李四', 18);
console.log(p1)
console.log(p2)
p2.study()

2.2 类的继承

class Person {constructor(name, age) {this.name = namethis.age = age}speak() {//  speak方法放在了哪里？类的原型对象上，供实例使用// 通过Person实例调用speak时，speak中的this就是Person实例console.log(`我叫${this.name}，我的年龄是${this.age}`)}
}
// 创建一个Student类，继承Person类
class Student extends Person{constructor(name, age, grade) {super(name, age);this.grade = grade}// 子类重写父类的方法speak() {console.log(`我叫${this.name}，我的年龄是${this.age}，我在读${this.grade}年级`)}study() {console.log('我在学习')}
}
const s1 = new Student('小张', 15, '高一')
console.log(s1)
s1.speak()
s1.study()

2.3 类的继承-偏向于react中props

class Person {constructor(props) {this.name = props.namethis.age = props.age}speak() {//  speak方法放在了哪里？类的原型对象上，供实例使用// 通过Person实例调用speak时，speak中的this就是Person实例console.log(`我叫${this.name}，我的年龄是${this.age}`)}
}
// 创建一个Student类，继承Person类
class Student extends Person{constructor(props) {super(props);this.grade = props.grade}// 子类重写父类的方法speak() {console.log(`我叫${this.name}，我的年龄是${this.age}，我在读${this.grade}年级`)}study() {console.log('我在学习')}
}
// 创建student实例
const s1 = new Student({name: '小张',age: 18,grade: '高二'
})
console.log(s1)
s1.speak()
s1.study()

2.4 this的指向问题

// 改变方法中this的指向    babel会启动严格模式 此时的 window会是undefined
// script type="text/javascript"  时window打印没问题
function demo1() {console.log(this)
}
demo1()
const x = demo1.bind({a:1, b:2})
x()

3、简单的组件

• function 函数组件【推荐】
• class 类组件

// 简单的函数组件
function Demo1() {return <h1>Hello</h1>
}// 类组件 需要继承React.Component
class DemoClass extends React.Component {render() {return <h2>Class</h2>}
}// 不使用jsx 时的写法
function Demo3() {const li1 = React.createElement('li', {name: 'Jack'}, 'list-1')const li2 = React.createElement('li', {name: 'Jack'}, 'list-2')return React.createElement('ul', {name: 'Jack'}, li1, li2)
}// 渲染组件
ReactDOM.render(<div><Demo3/><Demo1/><DemoClass/></div>, // 标签必须闭合document.getElementById('example')
)

react中类组件的渲染过程

执行了ReactDOM.render() 之后，发生了什么？

• 1. React解析组件标签，找到了 MyComponent组件
• 1. 发现组件时使用类定义的，随后new出来该类的实例，并通过该实例调用到原型对象上的render方法
• 1. 将render返回的虚拟DOM转为真是DOM，随后呈现在页面中

// 创建类组件
class MyComponent extends React.Component {// render是放在哪里？  -- MyComponent的原型对象上，供实例使用// render中的this是谁？ -- MyComponent的实例对象render() {console.log('render中的this:', this)return <div><h2>我是类定义的组件（适用于【复杂组件】的定义）</h2></div>}
}
// 渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('example')
)

4、jsx语法规则

1. 定义虚拟DOM时，不要写引号
2. 标签中混入js表达式时要用{}
3. 样式的类名指定不要用class，要用className
4. 内联样式，要用style={{key: value}}的形式去写，样式名用驼峰形式
5. 只有一个跟标签
6. 标签必须闭合
7. 标签首字母解析规则
   1. 若小写首字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
   2. 若大写首字母开头，react就去渲染对应的组件，若组件没有定义，则报错

5、区分【js语句(代码)】与【js表达式】

1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

   下面这些都是表达式:

   1. a
   2. a+b
   3. demo(1)
   4. arr.map()
   5. function test(){}

2. 语句（代码）：

   下面这些都是语句（代码）:

   1. if(){}
   2. for(){}
   3. switch(){case: xxx}

6、模块和组件、模块化和组件化得理解

模块

1. 理解：向外提供特定功能的js程序，一般就是一个js文件
2. 为什么要拆分成模块：随着业务逻辑增加，代码越累越多切复杂
3. 作用：复用js，简化js的编写，提高js运行效率

组件

1. 理解：用来实现局部功能效果的代码和资源的集合(html/js/css/image等等)
2. 为什么：一个界面的功能更负责
3. 作用：复用编码，简化项目编码，提高运行效率

模块化

当应用的js都是以模块来编写的，这个应用就是一个模块化的应用

组件化

当应用是以组件的方式来实现的，这个应用就是一个组件化的应用

7、 组件中的样式

style 需要使用驼峰写法

<!--style 需要使用驼峰写法font-size  -> fontSize-->
ReactDOM.render(<div><h2 className="red">Hello</h2><h2 style={{color: 'green', fontSize: '30px'}}>Hello</h2>
</div>, document.getElementById('app'))

8、组件实例的三大核心属性

• prps
  • 每个组件都会有props属性【只读】
  • 组件标签的所有属性都保存在props中
  • 作用：通过标签属性从组件外 向组件内传递数据（只读 read only）
  • 对props中的属性值进行类型限制和必要性限制
• state
  • 更改state：setState()方法，不可直接更改数据
• refs
  • 给DOM元素添加ref属性
  • 给类组件添加ref属性

既然是组件实例的核心属性，由于function函数组件没有实例，所以不能使用state和refs，但是可以使用props【函数组件可以以传参的形式来接收props】

8、类组件

8.1 state

8.1.1 基本用法

// 类组件 有状态
class Hello extends React.Component {constructor(props) {super(props); // 写了constructor必须写superthis.state = {count: 0}}render() {return <div><h2>Hello, {this.state.count}</h2></div>}
}
// 简写方式class Hello1 extends React.Component{state = {count: 1}render() {return <h3>{this.state.count}</h3>}
}

8.1.2 处理this指向的几种方法

1. 【推荐】定义方法时使用箭头函数，因为箭头函数没有自己的this
2. 在onclick方法处通过bind改变this指向
3. 在构造函数中，将原型对象中的方法赋值给实例对象【直接在class中写的方法会出现在实例对象的原型对象中】这样在调用的时候调用的是实例对象的方法，this即指向实例对象

  // 类组件 有状态class Hello extends React.Component {constructor(props) {super(props);// 方法2. 可在构造函数中将发放赋值给实例对象// this.handleAddCount = this.handleAddCount.bind(this)this.state = {count: 0}}/*** 这种写法中的this指向的是按钮的onclick* 可在onClick={this.handleAddCount.bind(this)} 绑定this*/handleAddCount() {console.log(this)let {count} = this.state;this.setState({count: ++count})}//  方法3. 方法使用箭头函数：因为箭头函数没有this，会继承父级的thishandleAddCount1 = () => {console.log(this)let {count} = this.state;this.setState({count: ++count})}render() {return <div><h2>Hello, {this.state.count}</h2><button onClick={this.handleAddCount}> +1 [错误写法]</button><br/><br/>{/* 方法1. 可在onClick={this.handleAddCount.bind(this)} 绑定this*/}<button onClick={this.handleAddCount.bind(this)}>onclick bind +1</button><br/><br/><button onClick={this.handleAddCount1}>箭头函数+1</button></div>}}ReactDOM.render(<Hello/>,document.getElementById('example'))

8.2 类组件渲染列表数据到页面及按钮点击方法

  /*** 类组件* state 用法*/class ListClass  extends React.Component{constructor(props) {super(props);this.state = {arr: [1,2]}}handleAddList = () => {const arr = this.state.arr;this.setState({arr: [...arr, arr.length + 1]})}render() {return <div><ul>{this.state.arr.map(item => {return <li>{item}</li>})}</ul><button onClick={this.handleAddList}>添加一个</button></div>}}ReactDOM.render(<ListClass/>, document.getElementById('app'))

8.2 props

8.2.1 类组件中props基本用法

class Example extends React.Component{render() {const {name, age} = this.propsreturn <div>{name}--{age}</div>}
}ReactDOM.render(<div><Example name="Jack" age={18}/><Example name="Tom" age={20}/></div>,document.getElementById('example')
)

8.2.2 批量传递props

// 批量传递props
const p = {name: 'Jerry', age: 21}
ReactDOM.render(<div><Example {...p}/></div>,document.getElementById('example')
)

8.2.3 对类组件props进行限制

需要引入 prop-types.js

自React v15.5 起,React.PropTypes 已移入另一个包中

class Person extends React.Component{render() {const {name, age} = this.propsreturn <div>{name}--{age}</div>}
}
// 下面这种写法会将 propTypes 和 defaultProps放在Person类中
// 对props进行限制
Person.propTypes = {name: PropTypes.string.isRequired,age: PropTypes.number,speak: PropTypes.func // 限制为函数
}
// props默认值
Person.defaultProps = {age: 20
}
console.log(new Person())
// 批量传递props
const p = {name: 'Jerry', age: 21}
ReactDOM.render(<div><Person name="Jack" age={18}/><Person name="Tom" age={20}/><Person {...p}/></div>,document.getElementById('example')
)

将props的限制 propTypes和defaultProps写在类里面

注意：static 将属性加到类本身上，如果不写static会加载类的实例对象上

class Person extends React.Component{// 对props进行限制static propTypes = {name: PropTypes.string.isRequired,age: PropTypes.number}
// props默认值static defaultProps = {age: 20}render() {const {name, age} = this.propsreturn <div>{name}--{age}</div>}
}ReactDOM.render(<div><Person name="Jack" age={18}/><Person name="Tom" age={20}/></div>,document.getElementById('example')
)

8.2.4 函数组件中使用props

function Person(props) {const {name, age} = propsreturn <div>{name}--{age}</div>
}// 对props进行限制
Person.propTypes = {name: PropTypes.string.isRequired,age: PropTypes.number
}
// props默认值
Person.defaultProps = {age: 20
}
ReactDOM.render(<div><Person name="Jack" age={18}/><Person name="Tom" age={20}/></div>,document.getElementById('example')
)

8.3 ref

• 勿过度使用 Refs

8.3.1 String 类型的 refs

过时的api，可能会在未来版本中被弃用

class Example extends React.Component {handleClick = () => {const {input1} = this.refsalert(input1.value)}showMsg2 = () => {const {input2} = this.refsalert(input2.value)}render() {return (<div><input ref="input1" type="text" placeholder="ref1"/><button onClick={this.handleClick}>获取数据</button><input ref="input2" onBlur={this.showMsg2} type="text" placeholder="ref1"/></div>)}
}
ReactDOM.render(<Example/>,document.getElementById('example')
)

8.3.2 回调函数 refs

如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。

内联函数回调

class Example extends React.Component {handleClick = () => {const {input1} = thisalert(input1.value)}showMsg2= () => {const {input2} = thisalert(input2.value)}render() {return (<div><input ref={currentNode => this.input1 = currentNode} type="text"/><button onClick={this.handleClick}>获取数据</button><input ref={currentNode => this.input2 = currentNode} onBlur={this.showMsg2} type="text"/></div>)}
}
ReactDOM.render(<Example/>,document.getElementById('example')
)

不使用内联回调的方式

class Example extends React.Component {handleClick = () => {const {input1} = thisalert(input1.value)}showMsg2= () => {const {input2} = thisalert(input2.value)}saveInput = (c) => {this.input1 = c}saveInput2 = (c) => {this.input2 = c}render() {return (<div><input ref={this.saveInput} type="text" placeholder=""/><button onClick={this.handleClick}>获取数据</button><input ref={this.saveInput2} onBlur={this.showMsg2} type="text" placeholder=""/></div>)}
}
ReactDOM.render(<Example/>,document.getElementById('example')
)

8.3.3 React.createRef() 创建

Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

React.createRef() 调用后可以返回一个容器，容器可以存储被ref所标识的节点，该容器是专人专用的【需要几个创建几个】

class Example extends React.Component {myRef = React.createRef()handleClick = () => {console.log(this)const {myRef} = thisalert(myRef.current.value)}render() {return (<div><input ref={this.myRef} type="text" placeholder=""/><button onClick={this.handleClick}>获取数据</button></div>)}
}
ReactDOM.render(<Example/>,document.getElementById('example')
)

9、函数组件

使用React Hooks

• useState() 进行状态管理
• useEffect

/*** 函数组件中没有状态及this* 可以使用 react Hooks实现*/
import {useEffect, useState} from 'react'
import { Button, Divider } from 'antd'
function Home () {const [count, setCount] = useState(0);/*** 没有第二个参数的时候会多次调用* 为空数组的时候 调用一次后不再调用* 数组中包含某个参数的时候，参数改变的时候会调用  如：[count]*/useEffect(() => {console.log('home-useEffect');}, [])const handleCount = () => {setCount(preCount => ++preCount)}function handleCount1() {setCount(preCount => ++preCount)}return(<div><Divider>Home</Divider><h2 onClick={handleCount}>{count}</h2><Button type='primary' onClick={handleCount1}>{count}</Button></div>)
}export default Home

10、受控组件和非受控组件

非受控组件 – React (docschina.org)

• 受控组件： 表单数据是由 React 组件来管理的
• 非受控组件： 表单数据将交由 DOM 节点来处理

10.1 高阶函数

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数

1. 若A函数，接收的参数是一个函数，那么A函数就可以称之为高阶函数

2. 若A函数，调用的返回值依然是一个函数，那么A函数就可以称之为高阶函数

   常见的高阶函数有：Promise，setTimeout，arr.map()等等

10.2 表单组件实例

使用非受控组件实现

class Example extends React.Component {handleSubmit = (evnet) => {evnet.preventDefault()const {username, password} = thisconsole.log(`用户名是${username.value}，密码是${password.value}`)}render() {return (<form onSubmit={this.handleSubmit}>用户名 <input ref={c => {this.username = c}} type="text" placeholder="用户名"/>密码 <input ref={c => {this.password = c}} type="password" placeholder="密码"/><button>登录</button></form>)}
}
ReactDOM.render(<Example/>,document.getElementById('example')
)

使用受控组件实现

class Example extends React.Component {state = {username: '',password: ''}saveUsername = (event) => {this.setState({username: event.target.value})}savePassword = (event) => {this.setState({password: event.target.value})}handleSubmit = (event) => {event.preventDefault()const {username, password} = thisconsole.log(`用户名是${username.value}，密码是${password.value}`)}render() {return (<form onSubmit={this.handleSubmit}>用户名 <input onChange={this.saveUsername } type="text" placeholder="用户名"/>密码 <input onChange={this.savePassword} type="password" placeholder="密码"/><button>登录</button></form>)}
}
ReactDOM.render(<Example/>,document.getElementById('example')
)

使用受控组件实现-优化

class Example extends React.Component {state = {username: '',password: ''}saveFormData = (dataType) => {return (event) => {this.setState({[dataType]: event.target.value})}}handleSubmit = (event) => {event.preventDefault()const {username, password} = this.stateconsole.log(`用户名是${username}，密码是${password}`)}render() {return (<form onSubmit={this.handleSubmit}>用户名 <input onChange={this.saveFormData('username') } type="text" placeholder="用户名"/>密码 <input onChange={this.saveFormData('password')} type="password" placeholder="密码"/><button>登录</button></form>)}
}
ReactDOM.render(<Example/>,document.getElementById('example')
)

11、生命周期钩子

生命周期图谱 React lifecycle methods diagram (wojtekmaj.pl)

文档 State & 生命周期 – React (reactjs.org)

• componentWillMount

• componentDidMount

• shouldComponentUpdate

• componentWillUpdate

• componentDidUpdate

• componentWillUnmount

class Example extends React.Component {constructor(props) {console.log('constructor')super(props);this.state = {count: 0}}// 渲染前componentWillMount() {console.log('componentWillMount')}// 渲染后componentDidMount() {console.log('componentDidMount')}// 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。shouldComponentUpdate() {console.log('shouldComponentUpdate')return true // false时不会更新数据}// 更新前componentWillUpdate() {console.log('componentWillUpdate')}// 更新后componentDidUpdate() {console.log('componentWillUpdate')}// 卸载前componentWillUnmount() {console.log('componentWillUnmount')}handleClick = () => {this.setState({count: ++this.state.count})}render() {console.log('render')return (<div><h1>{this.state.count}</h1><button onClick={this.handleClick}>count+1</button></div>)}
}ReactDOM.render(<Example/>,document.getElementById('example')
)

14、路由

/router/index.js

import React, {Component} from 'react'
import {Route, BrowserRouter, Switch, Link} from 'react-router-dom';
// 引入页面
import Home from "../pages/Home";
import About from "../pages/About";
import Welcome from "../pages/Welcome";
import Student from "../pages/student";// 导航组件
class LinkPage extends Component {render() {return (<div>我是导航组件<br/><Link to="/">Welcome</Link><br/><Link to="/home">Home</Link><br/><Link to="/about">About</Link><br/><Link to="/student/1234">Student</Link></div>);}
}
// 路由
const Root = () => (<BrowserRouter>{/*导航组件*/}<LinkPage/><Switch><Route exact path="/" component={Welcome}/><Route path="/home" component={Home}/><Route path="/about" component={About}/><Route path="/student/:id" component={Student}/></Switch></BrowserRouter>
)
export default Root

/index.js

import React from "react";
import ReactDOM from 'react-dom';
import Root from "./router/index";ReactDOM.render(<Root/>,document.getElementById('root')
)

react基础入门，类组件和函数组件，state，props，refs相关推荐

1. react render相关 【类组件、函数组件 】

   [类组件] 大概就是如果是class的写法,并且extends React.component 就要手动写render [函数组件] 如果是const App = ()=> {} 那么就酸函数组 ...

2. React 中ref 的使用（类组件和函数组件）以及forwardRef 与 useImperativeHandle 详解

   前言 在一个父组件中,我们想要获取到其中的节点元素或者子组件实例,从而直接调用其上面的方法.Class 类组件和函数组件是两种不同的写法. 1. Class 组件中使用ref 在 React 的 Cl ...

3. React 类组件和函数组件

   React 类组件和函数组件 目录 1.类组件和函数组件 2.如何使用 props 和 state 3.如何绑定事件 4.复习 this+ 两个面试题 组件component 一.概念 Element ...

4. React父组件调用子组件的方法【class组件和函数组件】

   在react组件之间的通信是通过props属性来完成的,比如父组件需要将数据传递给子组件,那么组件在渲染子组件的时候,直接将数据作为子组件的属性传参: <Child onChildEvent={ ...

5. antd 函数组件_React - 组件：函数组件

   目录: 1. 组件名字首字母一定是大写的2. 返回一个jsx3. jsx依赖React,所以组件内部需要引入React4. 组件传参 a. 传递.b. 接收. function Component( ...

6. React基础入门知识铺垫

   1.react特点 ①声明式编码 ②组件化编码 ③React Native 编写原生应用 ④高效(优秀的diffing算法) ⑤用于动态构建用户界面的js库(只关注视图) 2.React高效的原因 ① ...

7. React基础入门（一）

   1.React简介 官网 英文官网: https://reactjs.org/ 中文官网: https://react.docschina.org/ 描述介绍 用于动态构建用户界面的 JavaScri ...

8. antd 函数组件_react函数组件中引用antd＜Form/＞组件demo

   ```xml import React, { forwardRef, useEffect } from 'react'; import { Input, Select, Row, Col, Butto ...

9. 〖Python零基础入门篇㉟〗- 私有函数、私有变量及封装

   订阅 Python全栈白宝书-零基础入门篇 可报销!白嫖入口-请点击我.推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 Python全栈白宝书专栏,免费阶段订阅数量43 ...

最新文章

1. jsoncpp的输出顺序
2. Scanner读取记事本文件内容为空的解决办法
3. 检查Red Hat JBoss BRMS部署架构的规则和事件（第一部分）
4. Mybatis 在 IDEA 中使用 generator 逆向工程生成 pojo,mapper
5. java string... 参数_Java String.Format() 方法及参数说明
6. Ubuntu搭建tftp服务器
7. Tensorflow——Dropout(解决过拟合问题)
8. ​知者见于未萌：百度CTO王海峰与中国 AI 三十年
9. 【干货篇】bilibili：基于 Flink 的机器学习工作流平台在 b 站的应用
10. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_21-页面静态化-静态化测试-静态化程序编写...
11. 宝塔控制面板忘记密码怎么找回？
12. vmware之VMware Remote Console (VMRC) SDK（二）
13. 学习ubuntu基础看完这一篇就够了，我是貔貅带你打开ubuntu的大门
14. 视频教程-QQ机器人--基于酷Q开发7精讲-C/C++
15. 【小家java】Java中主线程（父线程）与子线程的通信和联系
16. 用Scratch+Python做一个联网游戏！不比打游戏差吧！
17. vs单步调试及断点调试基本介绍
18. linux去掉锁屏密码,使用ADB SHELL清除联想A390t的锁屏密码
19. txt电子书如何用Windows电脑阅读？
20. 2021新宁二中高考喜报成绩查询,新宁一中、二中、崀高等校高考喜报！最高分684，全县大获得丰收！...

热门文章

1. w8如果找到我的计算机快捷键,Win键的存在感都找回来了！Win8常用快捷键一览
2. 02属性操作_jqueryCSS类操作(addClass()、removeClass()、toggleClass())
3. redis缓存穿透、缓存击穿、缓存雪崩
4. 百度，来一场华丽的视觉盛宴吧
5. 高级计算机程序员实操题,2016年软考程序员真题练习及答案（一）
6. 俯瞰·明统系列·全部掠影
7. wow 正在登陆服务器 就未响应,魔兽win10未响应怎么办_魔兽win10未响应问题解决方法_快吧游戏...
8. 小米10手机散热器设计（一）散热计算（W/mk W/m°C单位计算）
9. arduino单片机经典程序
10. 使用JvisualVM无法连接linux远程服务器，错误无法使用service:jmx:rmi:// /jndi/rmi://ip:port/jmxrmi