React学习（二）

组件

首字母大写 

使用闭合或者成对标签

function Button() {
  return <button>按钮组件</button>;
}
function App() {
  return (
    <div className="App">
      <Button></Button>
    </div>
  );
}

export default App;

useState

import{useState}from 'react'
function App() {
  // 使用useState添加一个状态变量
  // setIndex 修改状态变量的方法
  const [index,setIndex]=useState(0)
  // 点击事件
  function handleClick() {
    setIndex(index+1)
  }
  const [form,setForm]=useState({name:'aaa'})
  function handleClick2() {
    setForm(
      {...form,
      name:'ss'})
  }
  return (
    <div className="App">
     <button onClick={handleClick}>修改字符串{index}</button>
     <button onClick={handleClick2}>修改对象{form.name}</button>
    </div>
  );
}

export default App;

对象的修改必须使用。。。展开运算符返回新的对象，不能修改原数组 

直接使用index++ 是不会修改视图  需要调用setIndex方法     set+自定义方法名为命名规则

更新 state 中的数组 – React 中文文档