React学习笔记（2.0）

React事件绑定

语法：在对应标签上书写on+事件（比如onClick,onChange），注意和原生的事件区分，React的事件首字母要大写。

const handleChange=(e:any)=>{
  console.log(e);
  console.log('change事件触发');
  
  // e不是原生事件
  //e.nativeEvent是原生事件
}
const App = () => {
  let list=['1','2','3'];

  // for(let i=0;i<list.length;i++){
  //   list[i]=<li>{list[i]}</li>
  // }

  const myClass = ['box1', 'box2']

  const myClass2 = classNames({
    box1:true,
    box2:true,
    [style.box5]:true
  })



  return (
    <>
    <div>
      <div className={myClass.join(' ')}>App</div>
      <div style={{color:"purple",fontWeight:900}}>App2</div>
      <div className={myClass2}> hello world!</div>
      <button onClick={handleClick}>click me</button>
      <button onClick={handleClick2(123)}>click me2</button>
      <button onClick={(e)=>handleClick3(456,e)}>click me3</button>
      <input type="text" onChange={handleChange} placeholder='请输入内容' />
      {list.map((item,index) => <li key={index}>{item}</li>)}
    </div>
    <div></div>
    </>
  )
}

export default App

这里的e就是一个类似原生的事件e，并不是真正的原生事件e,如果要使用原生事件e，需要使用 e.nativeEvent。

如果要传递自定义参数，需要进行以下修改：

const handleChange=(e:any,name:string)=>{
  console.log(e.target.value);
  console.log('传递过来的参数',name);
  
  // e不是原生事件
  //e.nativeEvent是原生事件
}
const App = () => {
  let list=['1','2','3'];

  // for(let i=0;i<list.length;i++){
  //   list[i]=<li>{list[i]}</li>
  // }

  const myClass = ['box1', 'box2']

  const myClass2 = classNames({
    box1:true,
    box2:true,
    [style.box5]:true
  })



  return (
    <>
    <div>
      <div className={myClass.join(' ')}>App</div>
      <div style={{color:"purple",fontWeight:900}}>App2</div>
      <div className={myClass2}> hello world!</div>
      <button onClick={handleClick}>click me</button>
      <button onClick={handleClick2(123)}>click me2</button>
      <button onClick={(e)=>handleClick3(456,e)}>click me3</button>
      <input type="text" onChange={()=>handleChange(event,'jack')} placeholder='请输入内容' />
      {list.map((item,index) => <li key={index}>{item}</li>)}
    </div>
    <div></div>
    </>
  )
}

export default App

<input type="text" onChange={(e)=>handleChange(e,'jack')} placeholder='请输入内容' />

注意形参和实参的顺序。

 组件

概念：一个组件就是用户界面的一部分，他可以有自己的逻辑和外观，组件之间可以相互嵌套，也可以复用多次。

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可。

首先，新建一个组件button.tsx

然后引入使用：

import Button from './components/button'


 return (
    <>
    <div>
      <div className={myClass.join(' ')}>App</div>
      <div style={{color:"purple",fontWeight:900}}>App2</div>
      <div className={myClass2}> hello world!</div>
      <button onClick={handleClick}>click me</button>
      <button onClick={handleClick2(123)}>click me2</button>
      <button onClick={(e)=>handleClick3(456,e)}>click me3</button>
      <input type="text" onChange={(e)=>handleChange(e,'jack')} placeholder='请输入内容' />
      {list.map((item,index) => <li key={index}>{item}</li>)}
      <Button></Button>
    </div>
    <div></div>
    </>
  )
}

 useState的使用

useState是一个React Hook（函数），他允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果。

本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着发生变化（数据驱动视图），可以类比与vue中的响应式。

const [count,setCount]=useState(0)

//useState是一个函数，返回值是一个数组
//数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
//useState的参数将作为count的初始值

//useState实现一个计数器按钮
  const [count,setCount] = React.useState(0)
  const handleClick4=()=>{
    setCount(count+1)
    console.log('click',count);
  }

  return (
    <>
    <div>
      <div className={myClass.join(' ')}>App</div>
      <div style={{color:"purple",fontWeight:900}}>App2</div>
      <div className={myClass2}> hello world!</div>
      <button onClick={handleClick}>click me</button>
      <button onClick={handleClick2(123)}>click me2</button>
      <button onClick={(e)=>handleClick3(456,e)}>click me3</button>
      <input type="text" onChange={(e)=>handleChange(e,'jack')} placeholder='请输入内容' />
      {list.map((item,index) => <li key={index}>{item}</li>)}
      <Button></Button>
      <button onClick={handleClick4}>加一</button>
      <div>{count}</div>
    </div>
    <div></div>
    </>
  )
}

 状态不可变

在React中，状态被认为是制度的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新。

比如上面中修改count的值不能直接使用count++，而是使用setCount（count+1）来修改count的值。

对象修改状态

const [form ,setForm]=useState({
    name:'mez',
    age:18
  })
  const handleClick5=()=>{
    setForm({
      ...form,
      name:'jack'
    })
  }
  

  return (
    <>
    <div>
      <div className={myClass.join(' ')}>App</div>
      <div style={{color:"purple",fontWeight:900}}>App2</div>
      <div className={myClass2}> hello world!</div>
      <button onClick={handleClick}>click me</button>
      <button onClick={handleClick2(123)}>click me2</button>
      <button onClick={(e)=>handleClick3(456,e)}>click me3</button>
      <input type="text" onChange={(e)=>handleChange(e,'jack')} placeholder='请输入内容' />
      {list.map((item,index) => <li key={index}>{item}</li>)}
      <Button></Button>
      <button onClick={handleClick4}>加一</button>
      <button onClick={handleClick5}>修改对象</button>
      <div>{count}--{form.name}</div>
    </div>
    <div></div>
    </>
  )
}

export default App

注意：不能使用form.name进行直接修改！

基础样式控制

React组件基础的样式控制有两种方式

1.行内样式（不推荐）

<div style={{color:'blue'}}>哈哈</div>

2.class类名控制样式

在css文件中定义样式，然后在引入使用

.box{
color:'blue'
}


<div className="box">哈哈</div>