asp 网站地图生成,网站怎么建立会员,湖南城市建设技术学院官方网站,网站免费大全jsx语法规则
定义虚拟DOM时#xff0c;不要写引号。标签中混入JS表达式时要用{ }。样式的类名指定不要用class#xff0c;要用className。内联样式#xff0c;要用style{{key#xff1a;value}}的形式去写。只有一个根标签标签必须闭合标签首字母 )若小写字母开头#xf…jsx语法规则
定义虚拟DOM时不要写引号。标签中混入JS表达式时要用{ }。样式的类名指定不要用class要用className。内联样式要用style{{keyvalue}}的形式去写。只有一个根标签标签必须闭合标签首字母 )若小写字母开头则将该标签转为html中同名元素若html中无该标签对应的同名元素则报错)若大写字母开头react就去渲染对应的组件若组件没有定义则报错。 js语句和js表达式
一定注意区分:【js语句(代码)】与【js表达式】
1.表达式:一个表达式会产生一个值可以放在任何一个需要值的地方
下面这些都是表达式:
(1). a(2). ab(3). demo(1)(4). arr.map()(5). function test () {}
2.语句(代码):
下面这些都是语句(代码):
(1).if(){}(2).for(){}(3).switch(){case:xxx}
{ }中是放JS表达式 模块与组件、模块化与组件化的理解
模块当应用的js都以模块来编写的这个应用就是一个模块化的应用
理解:向外提供特定功能的js程序,一般就是一个js文件e为什么要拆成模块:随着业务逻辑增加代码越来越多且复杂。作用:复用 js,简化js 的编写,提高js运行效率
组件当应用是以多组件的方式实现的这个应用就是一个组件化的应用
理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)为什么:一个界面的功能更复杂作用:复用编码,简化项目编码,提高运行效率 组件实践
函数式组件适用于简单组件的定义class式组件适用于复杂组件的定义 记住前面说的组件标签是大写开头哦
函数式组件 执行力ReactDOM.render(MyComponent /,document.getElementById(test))之后发送了什么 1.React解析组件标签找到了MyComponent组件 2.发现组件是使用函数定义的随后调用该函数将返回的虚拟DOM转为真实DOM随后出现在页面中。 函数式组件函数名就是组件名
同理类式组件类名就是组件名
类式组件 执行了ReactDOM.render(MyComponent /,document.getElementById(test))之后发送了什么 1.React解析组件标签,找到了MyComponent组件。 2.发现组件是使用类定义的随后new出来该类的实例并通过该实例调用到原型上的render方法。 3.将render返回的虚拟DOM转为真实DOM随后呈现在页面中。 组件实例三大属性
1.state
实例讲解
构造函数中的this就是指向组件实例对象
只有通过组件实例调用的方法方法中的this才不是undefined而是指向实例对象。
如果渲染的时候在标签onClick属性中直接写this.方法相当于直接把该方法拉出来赋给了onClick当点击时是直接触发该方法本身而不是用组件实例去调用的。
类中的方法自动开启了局部的严格模式所以类中方法的this为undefined。 但是呢这个样子虽然可以唱成功让我们在方法中获取到组件实例对象
我们顺理成章就会想着用this.state.isHot!this.state.isHot去修改isHot的值。
但打印出来发现值是改了可是react不认。 状态state不可直接更改我们需要借助一个内置的API更改——setState 注意这里虽然是说是setState但它进行的是一个更新操作而不是直接替换
所以我们可以使用setState灵活修改state中的部分值 在上面的程序中 构造器调用几次 render调用几次 方法changeWeather调用几次 ——我们可以在它们内部的第一行进行输出操作然后我们就可以通过控制台查看输出情况获得答案 所以 构造器调用几次——1次 render调用几次——1n次 方法changeWeather调用几次——点几次调几次 触发方法时是先调用changeWeather再进行渲染render 虽然上面那样子写很标准且没什么毛病但是通过上面一系列我们发现实在是太麻烦了如果我们有很多个类中方法构造器中内容将会变得非常累赘
其实我们可以大大精简上面的代码根本不需要用到构造器在类中赋值语句相当于直接给类添加属性。
所以我们不需要在构造器中初始化state我们可以把它提到外面来
而方法也不能简单地直接像上面那样写应该使用赋值语句的形式箭头函数。
箭头函数的特点是在箭头函数内调用this它会从箭头函数外面寻找this。
这样子一操作代码就变成了这样子 理解 (1)state是组件对象最重要的属性,值是对象(可以包含多个key-value 的组合) (2)组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件) 注意点
1)组件中 render 方法中的this为组件实例对象 2)组件自定义的方法中 this 为 undefined如何解决? a.强制绑定this:通过函数对象的 bind() b.箭头函数 3)状态数据不能直接修改或更新要通过setState 2.props
实例讲解
回顾...展开运算符的用法 原生js中不能使用...展开运算符展开对象但可以使用花括号加展开运算符进行深拷贝
直接用赋值语句的话相当于改变指向不等于复制赋值。 在babelreact的作用下可以使用后{...对象} 展开对象但是仅仅适用于标签属性的传递。
如果要对prop传值进行类型限定和默认值设置
记得导包 应像下面这样子在类里面设置: 函数式组件也可以使用props 如果要对函数组件props进行限制
则放在函数外面直接对函数组件实例添加限制 理解 (1)每个组件对象都会有props(properties的简写)属性 (2)组件标签的所有属性都保存在 props 中 作用 (1)通过标签属性从组件外向组件内传递变化的数据 (2)注意:组件内部不要修改 props 数据·因为是只读的 props总结
1)内部读取某个属性值
this.props.name
2)对props中的属性值进行类型限制和必要性限制
第一种方式React v15.5开始已弃用 内置于React中后进行改进把prop-types库提取出来减轻了React的重量
第二种方式新
使用prop-types库进行限制需要引入prop-types库 3)扩展属性将对象的所有属性通过props传递 4)默认属性值 5)组件类的构造函数 3.refs与事件处理
理解 组件内的标签可以定义ref属性来标识自己 编码
有三种形式
(1)字符串形式的ref 注意这里是双引号
注意这种方法已经要被废弃了官方不推荐使用 (2)回调形式的ref 注意内联函数写法更新过程中会执行两次 可以通过定义成class的绑定函数解决类绑定 (3)createRef创建ref容器 React.createRef调用后可以返回一个容器该容器可以存储被ref所标识的节点
但该容器是专人专用的
但这个方法是当前React最常用也是最推荐使用的。
