欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react学习笔记

程序员文章站 2022-03-21 11:35:02
react 构建用户界面的javaScript库,主要用于构建UI界面,Instagram, 2013年开源。特点:1.声明式的设计2.高效、采用虚拟DOM来实现DOM的渲染,最大限度的减少DOM的操作。3.灵活,跟其他库灵活搭配使用。4.JSX,俗称js里面写HTMl,javascript 语法的扩展。5.组件化,模块化,代码容易复用发,2016年之前大型项目非常喜欢。6.单向数据流,没有实现数据的双向绑定,数据=》视图=>事件=》数据创建项目1.CDN引入,仅用户学习调试2.脚...

react 构建用户界面的javaScript库,主要用于构建UI界面,Instagram, 2013年开源。

特点:
1.声明式的设计
2.高效、采用虚拟DOM来实现DOM的渲染,最大限度的减少DOM的操作。
3.灵活,跟其他库灵活搭配使用。
4.JSX,俗称js里面写HTMl,javascript 语法的扩展。
5.组件化,模块化,代码容易复用发,2016年之前大型项目非常喜欢。
6.单向数据流,没有实现数据的双向绑定,数据=》视图=>事件=》数据

创建项目
1.CDN引入,仅用户学习调试
2.脚手架

安装:npm install -g create-react-app
创建项目: create-react-app my-demo cd
my-demo /进入目录 然后启动/ npm start

react元素渲染

// let h1=<h1>hello</h1>;

使用JSX的写法,可以创建JS元素对象
注意,JSX元素对象,或者组件对象,只能有一个父元素

React Jsx
优点:
1.JSX执行更快,编译为javascript代码时进行了优化
2.类型更安全,编译过程如果出错就不能编译,及时发现错误
3.jsx编译模板更加简单快捷(不要跟vue比)
注意:
1.jsx必须要有根节点
2.正常的普通HTML元素要小写,如果是大写,默认认为是组件

JSX表达式{{ ? : }}
1.有Html元素构成
2.中间如果需要插入变量用{}
3.{}中间可以使用表达式
4.{}中间表达式中可以使用jsx对象
5.属性和html内容一样都是用{}来插入内容

JSX style 样式
1.class中,不可以存在多个class属性
2.style之中,如果存在多个单词的属性组合,第二个单词开始,首字母大写,或者
用引号引起来,否则会报错。
3.多个类共存的问题。
4.注释:必须在{}里面写,否则报错{/**/}

react组件
1.函数式组件
2.类组件
3.复合组件,组件中又有其他的组件,既可以有函数式组件,又可以有类组件
区别:函数式组件一般用于静态没有交互事件内容得组件
类组件,一般又称为动态组件,那么一般会有交互或者数据修改得操作。

react state
相当于vue的data,但是使用方式跟vue不一样
组件的构造函数不会重新执行,只有render函数会重新执行

props父传子
父传递给子,单向流动,不能子传递给父
props的传值可以是任意的类型
props可以设置默认值

HelloMessage.defaultProps={name:'白敬亭',msg:'123'} //HelloMessage是组件名

注意:props可以传递函数,props可以传递父元素的函数,就可以去修改父元素的state,
从而达到传递数据给父元素

props子传父
调用父元素的函数从而操作父元素的数据,从而实现数据从子元素传递至父元素

react事件
特点:
1.react绑定事件命名,驼峰命名法,驼峰命名法onClick
2.{},传入一个函数,而不是字符串
事件对象:React返回的事件对象是代理的事件对象,如果想要查看事件对象的具体值,必须
直接输出事件对象的属性
原生,阻止默认行为事,可以直接返回return false
在react中阻止默认必须使用e.preventDefault()

react事件传参:

{/* 不使用箭头函数的方式 */}
<button onClick={function(e){this.prevent1({mag:'123'},e)}.bind(this)}>点击</button>
{/* 使用箭头函数 */}
<button onClick={(e)=>{this.prevent1({mag:'123'},e)}}>点击</button>

react 条件渲染
react中条件渲染即使和javascript中,条件运算,汝if…else…三元运算符等。
1.直接通过条件运算返回要渲染的jsx对象
2.通过条件元素得出jsx对象,在将jsx对象渲染到模板中。

案例一:

// 直接通过条件运算返回要渲染的jsx对象
    render(){
        if(this.state.isLogin){
            return(<UserGreet></UserGreet>)
        }else{
            return(<UserLogin></UserLogin>)
        }
 }

案例二:

 //通过条件元素得出jsx对象,在将jsx对象渲染到模板中。
    render(){
        let element=null
        if(this.state.isLogin){
            element=<UserGreet></UserGreet>
        }else{
            element=<UserLogin></UserLogin>
        }
        return(
            <div>
                <h1>这是头部</h1>
                {element}
                <h1>这是三元运算符的操作</h1>
                {this.state.isLogin?<UserGreet></UserGreet>:<UserLogin></UserLogin>}
                <h2>这是尾部</h2>
            </div>
        )
    }

列表渲染
将列表内容拼装成数组放置到模板中。
将数据拼装成数组的jsx对象。
使用数组的map方法,对每一项数据按照jsx的形式进行加工,最终得到1个每一项都是jsx对象的
数组,在将数组渲染到模板中。
key值需要放置到每一项中。

本文地址:https://blog.csdn.net/qq_44929535/article/details/109638765

相关标签: react reactjs