Skip to content

Latest commit

 

History

History
182 lines (146 loc) · 3.74 KB

2021-11-30-react入门.md

File metadata and controls

182 lines (146 loc) · 3.74 KB
title date tags author
node.js学习
2021/11/30
前端
D届
dogcat-ux

起步

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

<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代码 }

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

类式组件

类组件必须继承React.Component

//虚拟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（）是把这个函数返回值赋给它

  //类式组件
  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的指向问题

//类式组件
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.字符串（过时）

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.内联回调函数

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存储容器（专人专用，只能存一个）

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"))

更多

先到这