node.js学习

Posted by dogcat-ux on 2021-11-30

起步

引入react相关文件后,script里面写JSX

1
2
3
4
5
6
7
8
9
10
<body>
<div id="test"></div>
<script type="text/babel">
//JSX
//虚拟dom
const vm = <h1>2123</h1>
//挂载到真实dom上
ReactDOM.render(vm, document.querySelector("#test"))
</script>
</body>

函数式组件

中括号 { 这里面书写js代码 }

1
2
3
4
5
6
7
8
//虚拟dom
const vm = <h1>2123</h1>
//函数式组件
function Hello(){
return (<div>Hello{vm}</div>)
}
//挂载到真实dom上
ReactDOM.render(<Hello/>, document.querySelector("#test"))

类式组件

类组件必须继承React.Component

1
2
3
4
5
6
7
8
9
10
//虚拟dom
const vm = <h1>2123</h1>
//类式组件
class Hello extends React.Component{
render() {
return (<div>Hello{vm}</div>)
}
}
//挂载到真实dom上
ReactDOM.render(<Hello/>, document.querySelector("#test"))

React在调用ReactDOM.render的时候发现Hello,去查找定义Hello的类或者函数,然后React内部自己实例化了这个类,然后默认调用了render函数

组件三大属性

props

props挂载到类的实例本身,以对象的形式存在

注意:

1.组件返回值只能有一个根元素

2.onClick={this.props.onClick}这是把this.props.onClick整个函数赋给它,this.props.onClick()是把这个函数返回值赋给它

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//类式组件
class Hello extends React.Component{
constructor(props) {
super(props);
}
render() {
console.log(this)
return (<div onClick={this.props.onClick}>
Hello{this.props.value}
</div>)
}
}

//挂载到真实dom上
ReactDOM.render(<Hello value="1231" onClick={()=>{
console.log("点击了Hello")
}}/>, document.querySelector("#test"))

state

state挂载到类的实例本身,以对象的形式存在,通过this.setState去修改state的值,this.setState的修改不是对象整个覆盖,而是diff修改,onClick用非内联非箭头函数的时候要注意this的指向问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//类式组件
class Hello extends React.Component{
constructor() {
super();
this.state={
id:1,
value:"aaaa",
}
}
render() {
return <div onClick={()=>this.setState({ value:"bbb"})}>
<h1>{this.state.value}</h1>
<h1>{this.state.id}</h1>
</div>
}
}

//挂载到真实dom上
ReactDOM.render(<Hello/>, document.querySelector("#test"))
refs

ref尽量少用

1.字符串(过时)

1
2
3
4
5
6
7
8
9
10
11
class Hello extends React.Component{
constructor() {
super();
}
render() {
return <div ref="hello" onClick={()=>{console.log(this.refs.hello)}}>21</div>
}
}

//挂载到真实dom上
ReactDOM.render(<Hello/>, document.querySelector("#test"))

2.内联回调函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Hello extends React.Component {
constructor() {
super();
}
render() {
return(
<div>
<div ref={(element) => {this.node = element}}>我是node</div>
<div onClick={() => {console.log(this.node)}}>点击我输出node</div>
</div>
)
}
}
ReactDOM.render(<Hello/>, document.querySelector("#test"))

3.类绑定回调函数

​ 就是把内联函数变成类的内部函数

4.creatRef存储容器(专人专用,只能存一个)

1
2
3
4
5
6
7
8
9
10
11
12
13
class Hello extends React.Component{
constructor() {
super();
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} onClick={()=>{console.log(this.myRef.current)}
}>21</div>
}
}

//挂载到真实dom上
ReactDOM.render(<Hello/>, document.querySelector("#test"))

更多

先到这