美文网首页
react hooks userState

react hooks userState

作者: 我的天气很好啦 | 来源:发表于2019-07-18 23:14 被阅读0次

React引入了React Hooks,简单点说就是可以完全不用类来写组件,可以用函数来写组件。函数使用state只能通过useState函数。
使用例子

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

function App(){
  //useState的参数为初始状态值,返回了一个长度为2的数组,第一个元素就是我们类组件里的state对象,第二个元素是个函数,作用相当于类组件里用的setState。这两个元素的名字可以随便取,
  const [state, setState] = useState({ text: "", checked: false })
  const updateState = partialState => setState(oldState => ({
    ...oldState
    ...partialState
  }))
  return (
    <div>
      <input 
          type="text"
          value={state.text}
          onChange={e => 
            updateState({
              text: e.target.value
            })    
          }
      />
    <input 
          type="checkbox"
          value={state.checked}
          onChange={() => updateState({ checked: !state.checked })}
      />
      <ul>
        <li>{state.text}</li>
        <li>{state.checked.toString}</li>
      </ul>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

相关文章

  • react hooks userState

    React引入了React Hooks,简单点说就是可以完全不用类来写组件,可以用函数来写组件。函数使用state...

  • 用实战带你走进react hooks:userState、 us

    React 16.8发布后带来了一项新的玩意,React发生了大改变!!!解决了很多类组件的固有缺陷,这篇文章让大...

  • React Hooks

    React Hooks Hooks其实就是有状态的函数式组件。 React Hooks让React的成本降低了很多...

  • react-hooks

    前置 学习面试视频 总结react hooks react-hooks react-hooks为函数组件提供了一些...

  • React Hooks

    前言 React Conf 2018 上 React 提出了关于 React Hooks 的提案,Hooks 作为...

  • 5分钟简单了解React-Hooks

    首先附上官网正文?:React Hooks Hooks are a new addition in React 1...

  • react-hooks

    react-hooks react-hooks 是react16.8以后,react新增的钩子API,目的是增加代...

  • React-hooks API介绍

    react-hooks HOOKS hooks概念在React Conf 2018被提出来,并将在未来的版本中被...

  • React Hooks 入门

    React Hooks 是 React v16.8 版本引入了全新的 API。 React Hooks 基本概念 ...

  • react hooks 源码分析 --- useState

    1. react hooks简介 react hooks 是react 16.8.0 的新增特性,它可以让你在不编...

网友评论

      本文标题:react hooks userState

      本文链接:https://www.haomeiwen.com/subject/yozrlctx.html