react__jsx语法
在我看来，写在return里面的内容属于jsx
1、在jsx中可以使用大括号来识别表达式
大括号里可以写：引起来的字符串
大括号里可以写：javascript变量
大括号里可以写：函数调用和方法调用
大括号里可以写：javascript对象
2、在jsx中实现列表渲染可以使用map方法
const list = [
{
id:'001',
name:'d'
},
{
id:'002',
name:'q'
},
{
id:'003',
name:'s'
}
}
<ul>
{ list.map(item=> <li key={item.id}>item.name</li>) }
</ul>3、在jsx中实现条件渲染可以使用逻辑运算符或者三元表达式
对于一些基础的条件渲染：
{ true && <h1>dqs</h1> }
{ true? <h1>dqs</h1> :<h1>dhj</h1> }
对于复杂的条件渲染：
let articleType = 6
const thisContent = ()=>{
if(articleType === 0){
return <h1>我是0</h1>
}else if(articleType === 1){
return <h1>我是1</h1>
}else{
return <h1>我什么也不是</h1>
}
}
4、事件绑定
on + 事件名称 = { 事件处理程序 }
const handleClick = ( e )=>{ }
不带参数：
onClick = { handleClick }
带参数：
onClick = { ()=> handleClick("dqs") }
带e带参数：
onClick = { (e)=> handleClick("dqs" , e) } 5、react组件
关于组件的声明其实就是一个首字母大写的函数，渲染组件把函数名当成标签来写
//内部存放了组件的逻辑和视图UI
function MainBox (){
return (
)
}
function Main (){
return (
<Mainbox></Mainbox>
)
}6、react hook 函数
react hook函数使用规则：
1、只能在组件中或者其他自定义的hook函数中调用
2、只能在组件的顶层调用，不能在if for 或者其他函数中
useState：允许我们向组件添加一个状态变量，从而影响组件渲染的结果。
注：与普通js不同，状态变量一旦发生变化，视图UI也会跟着变化，数据驱动视图
useState是一个函数，返回值是一个数组，
第一个值为状态变量，
第二个值是用来修改状态变量的函数，用该set函数修改视图才会更新，
useState的参数将作为状态变量的初始值。
对于对象类型的变量：
let [user , setUser] = useState({name:'Jack'})
setUser(
{
...user,
name:'dqs'
}
)
useRef：主要用于在react中获取/操作dom
注：const inputRef = useRef(null)
<input type='text' ref={inputRef} />
其中inputRef.current可用来获取
useEffect：用于在react中不是由事件引起，而是由渲染本身引起的操作,例:ajax请求，更改dom
写法：useEffect(()=>{
},[])
注：第一个为副作用函数，放置要执行的操作
第二个防止依赖项，若为空，则只在渲染完执行一次
关于依赖项注解：
没有依赖项时，则在初始渲染时和组件更新时执行一次
依赖项为空数组时，则仅仅在初始渲染时执行一次
添加了特定依赖项，则在初始渲染时和依赖项变化时执行一次
清除副作用：
清理副作用函数最常见的执行时机是在组件卸载时自动执行
return ()=>{ //清除副作用逻辑
}
自定义hook：
自定义hook是以use打头的函数，通过自定义hook函数可以实现逻辑的封装和复用
7、基础样式控制
行内样式：
style={ { color:'red' } }
类名控制：
className='container'
如果需要动态类名控制：可以选用classnames库
className={classNames('foot' , {active: type === item.type})}
8、受控表单绑定
对于react input输入框和state数据的双向绑定
let [count , setCount] = useState(1)
<input/
type='text',
value={count}
onChange={(e)=>setCount(e.target.value)}
>9、组件通信
父子通信：
父传子：传递数据，在子组件标签上绑定属性
<Son name={"dqs"}></Son>
子组件通过props参数接受数据
function Son(props){
}
props说明：其中props是一个对象
可传递任意对象：数值 字符串 布尔值 数组 对象 函数 JSX
子组件中只能读取，不能修改
引用的子组件时，标签内部可以写内容，用props.children来接收。
子传父：在子组件中调用父组件的函数，并携带参数
父组件中声明函数，传给子组件，
子组件接受并触发，带个参数
兄弟通信：
1、通过子传父先传给父组件
2、通过父传子再传给另一个子组件
跨层通信：
使用context机制来实现跨层通信
1、使用createContext创建一个上下文对象Ctx， const Ctx = createContext()
2、在顶层组件通过Ctx.provider组件提供数据 ，
<Ctx.Provider value={name}></Ctx.Provider>
3、在底层组件中通过useContext来获取数据
const value = useContext(Ctx)