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}--{}</div>
</div>
<div></div>
</>
)
}
export default App
注意：不能使用进行直接修改！
基础样式控制
React组件基础的样式控制有两种方式
1.行内样式（不推荐）
<div style={{color:'blue'}}>哈哈</div>2.class类名控制样式
在css文件中定义样式，然后在引入使用
.box{
color:'blue'
}
<div className="box">哈哈</div>
