目录

react__jsx语法

目录

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)

其中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”}>

子组件通过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)