01-React基础(JSX, State, Refs, Props组件交互, Event, 生命周期)

十六夜之彼岸舞

于 2022-08-23 16:12:00 发布

阅读量150

点赞数

文章标签： react.js 交互 javascript 前端 ecmascript

本文链接：https://blog.csdn.net/flowerStream/article/details/126487940

版权

引入JS

# react 开发JS
react.development.js
# react dom渲染JS
react-dom.development.js
# jsx语法转换JS
babel.min.js
# 参数传值校验JS
prop-types.js

JSX语法

# 容器
<div id="test"></div>
# 注意写JSX语法需要定义为babel
<script type="text/babel">
  const myName = "flower";
  # 创建虚拟DOM, 不需要写双引号 换行使用()包裹
  const vdom = (
        # 最外侧只能包裹一个标签 建议使用div
        <div>
            # 变量取值使用{}, style样式使用{{中间使用逗号隔开}}
            <h1 style={{color:'yellow'}}>{myName}</h1>
            # 声明class属性使用className
            <h2 className="title"></h2>
        </div>
    )
    # 渲染到页面 传入虚拟DOM或者组件, 容器
    ReactDOM.render(vdom,document.getElementById("test"))
</script>

函数式组件

function Demo(){
    # 直接返回虚拟DOM
    return <h1>函数式组件2</h1>
}

类组件+State

# 首字母大写 并 继承 React.Component
class Demo extends React.Component {
  # state 状态管理
  state = {
    # 需要使用的变量 建议直接在state中声明好
    isHot: true
  }
  # 渲染函数返回虚拟DOM
  render(){
    const { isHot } = this.state;
    return (
      <h1 onClick={this.modifyWater}>今天天气很{isHot?"炎热":"寒冷"}</h1>
    )
  }
  // 只能写箭头函数, 不然this指针就需要在构造方法中绑定this
  modifyWater = () => {
    // 不能直接修改对象, 需要调用setState, 传入对象修改值, 修改不是替换对象,而是对比赋值
    this.setState({isHot:!this.state.isHot})
  }
}

组件使用

# 开头大写就是组件, 小写就是html标签
ReactDOM.render(<Demo />,document.getElementById("test"))

Props组件传值+参数校验

class Person extends React.Component {
  // 参数校验 必须写static
  static propTypes = {
    // 字符串必填
    name: PropTypes.string.isRequired,
    sex: PropTypes.string,
    // 数字
    age: PropTypes.number,
    // 函数
    speck: PropTypes.func
  }
  # 设置默认值
  static defaultProps = {
    sex: "无"
  }
  render() {
    # 从props取值
    const {name, age, sex} = this.props;
    return (
      <ul>
        <li>姓名:{name}</li>
        <li>性别:{sex}</li>
        <li>年龄:{age}</li>
      </ul>
    )
  }
}
let personInfo = {
  name:"flower",
  sex: "男",
  age: 18
}
# 结构传值
# 相当于 name={personInfo.name} sex=.....
ReactDOM.render(<Person {...personInfo}/>, document.getElementById("test"))

refs的三种写法

# 定义方式一 : 字符串 : 不建议
<input ref="leftInput" type="text" placeholder="点击按钮显示数据"/>
# 获取方式, 获取到的是真实DOM节点
const leftInput = this.refs.leftInput
# 定义方式二 : 函数 : 建议[建议使用引用函数, 不然会每次渲染都重新赋值一遍,但是官方说没啥事]
<input ref={ val => this.val=val} type="text" />
# 获取方式
const val = this.val
# 定义方式三 : React.createRef() : 推荐
# 我对这种方式进行了优化
# 调用函数
<input ref={this.refsiCopy('inputOne')} type="text" onBlur={this.blur} placeholder="失去焦点显示数据"/>
# 存储容器
refsi = {}
# 函数赋值
refsiCopy = nodeName => {
  return this.refsi[nodeName] = React.createRef()
}
# 使用, 从自定义存储容器中获取
blur = () => {
  console.log(this.refsi);
  const {value} = this.refsi['inputOne'].current;
  alert(value)
}

Event事件

class Demo extends React.Component {
  render() {
    return (
      <div>
        # 定义事件, 通过驼峰定义, React在原生事件上,包装了一层, 默认会传入event对象
        <input type="text" onBlur={this.blur} placeholder="失去焦点显示数据"/>
      </div>
    )
  }
  // 获取事件 入参event
  blur = (event) => {
    console.log(event.target);
    # 获取值
    console.log(event.target.value)
  }
}

非受控组件与受控组件

# 非受控组件 值直接挂在对象上, 而不是state, 所以是非受控组件
class Demo extends React.Component {
  render() {
    return (
      <div>
         # 表单提交
        <form onSubmit={this.handlerSubmit}>
          # 函数ref
          用户名:<input ref={c => this.username = c} name="username" type="text"/>
          密码:<input ref={c => this.password = c} name="password" type="password"/>
          <button>登录</button>
        </form>
      </div>
    )
  }
  # 执行表单
  handlerSubmit = (event) => {
    // 阻止表单默认事件
    event.preventDefault();
    const {username,password} = this;
    console.log(username.value,password.value)
  }
}
# 受控组件, 使用state控制值
class NameForm extends React.Component {
  state = {
    value:'123'
  }

  handleChange = (event) => {
    # 通过setState修改值
    this.setState({value: event.target.value});
  }

  handleSubmit = (event) =>{
     # 获取state中的值
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

函数传值

class NameForm extends React.Component {
  state = {
    input: '123'
  }

  // 返回一个函数给onChange 然后让React传入event 解决传递参数的问题
  handleChange = (input) => {
    # 返回函数, 用于React调用,传入event对象
    return event => {
      this.setState({[input]: event.target.value})
    }
  }

  render() {
    return (
      <label>
        # 因为事件必须赋值一个函数, 但是直接加(),会被渲染的时候直接就执行掉,返回的是值/undefined, 所以需要在执行函数中, 返回一个函数, 来给React调用
        名字:<input type="text" onChange={this.handleChange('input')}/>
        <span>{this.state.input}</span>
      </label>
    );
  }
}

生命周期

class Demo extends React.Component {
  // 会在组件挂载后(插入 DOM 树中)立即调用。
  // 依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。
  componentDidMount() {
    // 启动定时器
    this.action()
  }
  // 将要卸载的时候执行
  componentWillUnmount(){
    // 取消定时器
    clearInterval(this.state.active)
  }
  state = {
    opacity: 1,
    active: undefined
  }
  action = () => {
    const active = setInterval(() => {
      console.log("1")
      let {opacity} = this.state
      opacity -= 0.1
      if (opacity <= 0) opacity = 1
      this.setState({opacity})
    }, 200)
    this.setState({active})
  }

  remove = () => {
    // 卸载组件
    ReactDOM.unmountComponentAtNode(document.getElementById("test"))
  }

  render() {
    return (
      <div>
        <h2 style={{opacity: this.state.opacity}}>React好难呀</h2>
        <button onClick={this.remove}>不学了</button>
      </div>
    )
  }
}

16.3

>=16.4

其实其他生命周期的基本不用, 用的话也可以通过别的方式实现

常用的生命周期就三个

生命周期	作用
render	渲染DOM
componentDidMount	挂载完组件后,一般用于加载网络请求初始化数据
componentWillUnmount	组件将要卸载, 做一些处理关闭的操作, 比如关闭定时器啥的