Next 的原理分析_React原理(受控组件&非受控组件)

主要在Form 表单元素中使用

受控组件

依赖状态,默认值实时映射到状态，映射到state中，属于双向绑定,符合react的数据流，每当用户在表单中输入数据时，都会触发一个事件处理程序来更新组件的状态，从而重新渲染组件并更新表单的值。

import React, { useState } from 'react';

function ControlledComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>输入的值是: {value}</p>
    </div>
  );
}

export default ControlledComponent;

非受控组件

非受控组件是指，其值由 DOM 自身维护，而不是由 React 组件的状态控制。可以使用 ref 来直接访问 DOM 元素并获取其值。但是很容易和第三方组件一起使用。

import React, { useRef } from 'react';

function UncontrolledComponent() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`输入的值是: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">提交</button>
    </form>
  );
}

export default UncontrolledComponent;

事件

直接写在jsx 里，on+EvenType：onClick onChange 等，参数为react 的封装参数，可以直接读取。

• 监听事件 在类组件中，你需要确保事件处理器中的 this 绑定正确。通常可以在构造函数中绑定 this（bind 绑定）， 或者使用箭头函数来自动绑定 this。

constructor(props) {
    super(props);
    // 在构造函数中绑定 this
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert('按钮被点击了!');
  }
  const handleClick = () => {
    alert('按钮被点击了!');
  };

• 事件传参

1. bind 的形式

入参的参数和数据类型和传入相反，不知为何如此设计

import React, { Component } from 'react';

class EventParameterExample extends Component {
  handleClick(param, event) {
    alert(`参数: ${param}, 事件类型: ${event.type}`);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this, '参数值')}>点击我</button>
      </div>
    );
  }
}

export default EventParameterExample;

2. 箭头函数的形式

推荐此用法，性能较好

import React, { Component } from 'react';

class EventParameterExample extends Component {
  handleClick = (param, event) => {
    alert(`参数: ${param}, 事件类型: ${event.type}`);
  };

  render() {
    return (
      <div>
        <button onClick={(event) => this.handleClick('参数值', event)}>点击我</button>
      </div>
    );
  }
}

export default EventParameterExample;