React 组件处理数据

受控组件 （官方推荐）

• 监听每次输入,并自己赋值, 实时拿到更新数据

export default class Label extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      username: ""
    }
  }

  inputChange(e) {
    this.setState({
      username: e.target.value
    })
  }

  handleSubmit(e) {
    console.log(this.state.username);
    e.preventDefault()
  }

  render() {
    const {username} = this.state
    return (
      <div>
        <form onSubmit={e => this.handleSubmit(e)}>
          <label htmlFor="username">
            用户名:
          </label>
          <input
            type="text"
            id="username"
            onChange={e => this.inputChange(e)}
            value={username}
          />
          <input type="submit" value="提交"/>
        </form>
      </div>

    )
  }
}

非受控组件

• 使用ref来获取表单元素；
• 在非受控组件中通常使用defaultValue来设置默认值；

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.usernameRef = createRef();
  }

  render() {
    return (
      <div>
        <form onSubmit={e => this.handleSubmit(e)}>
          <label htmlFor="">
            用户:<input defaultValue="默认值" type="text" name="username" ref={this.usernameRef}/>
          </label>
          <input type="submit" value="提交"/>
        </form>
      </div>
    )
  }

  handleSubmit(event) {
    // 提交时获取最终值
    console.log(this.usernameRef.current.value);
    event.preventDefault();
  }
}

Portal

• Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案

ReactDOM.createPortal(child, container)
child : 任何可渲染的 React 子元素，例如一个元素，字符串或 fragment；
container : 是一个 DOM 元素
// 示例
render() {
    return ReactDOM.createPortal(
      this.props.children,
      document.getElementById("modal")
    )
  }

Fragment

• Fragment 允许你将子列表分组，而无需向 DOM 添加额外节点
• 简写 <> ... </>
• 注意点：Fragment简写形式不允许添加key

错误写法： <key={***}> ... </>

return (
 <Fragment>
    <header>头部</header>
    <footer>底部</footer>
 </Fragment>
)
// 简写
<>
  <header>头部</header>
  <footer>底部</footer>
</>
// 添加key
<Fragment key={item.id}>
  <div>{item.name}</div>
  <div>{item.age}</div>
</Fragment>

StrictMode

• StrictMode 是一个用来突出显示应用程序中潜在问题的工具
• 与 Fragment 一样，StrictMode 不会渲染任何可见的 UI

它为其后代元素触发额外的检查和警告；
严格模式检查仅在开发模式下运行;它们不会影响生产构建;
检测以下 :

1. 不安全的生命周期 (UNSAFE_componentWillMount)
2. 过时的ref API (ref="string")
3. 废弃的findDOMNode方法
4. 意外的副作用 (constructor被调用两次)
5. 过时的context API

// 以下代码 StrictMode 对 B、C 组件进行检测, 而不对A、D 检测
return (
  <div>
    <A/>
    <React.StrictMode>
      <B/>
      <C/>
    </React.StrictMode>
    <D/>
  </div>
);

END