react中集成其他框架与JSX Depth
react中集成其他框架与JSX Depth
集成其他框架
在react中去集成其他的框架，就是意味着你可以在react中去使用其他的框架，例如jquery等一些js框架，但是需要注意的是，你必须去清楚每一个操作在react中会产生什么样的行为，会不会是react在渲染的过程中产生混淆，以至于产生运行上的错误。对于整个的集成过程要根据不同的情况来说，下面就用官网所提供的一个实际例子来进行说明即可。
在上面的这个实际例子中，你需要注意到了在这里使用了框架jquery，这很明显就是react中的继承框架，在这里所有的关于dom节点的操作都写在了react中的生命周期函数当中。我们在<select>节点的ref初始化selected，然后在componentWillUnmount中将其拆下，onChange直接指向selected，因为组件的props可能会随着时间而变化，这包括事件处理程序。相反，我们将声明一个handleChange()方法来调用this.props。onChange，并将其反映到jQuery去更改事件。上面就简单的举了集合其他框架的例子。更加具体的使用方法与注意点，在官网文档中可以查到。
JSX Depth
1.对于JSX的加深认识，首先回顾以下在JSX中一个<div>标签中与其等价的式子是什么
上面部分的代码其实与下面部分的代码是相同的，这从中说明JSX其实就是一个对象，其对象中的第一个放的是组件的名称，第二个是组件的属性(用对象去表示)，第三就是组件之中的内容。这在之前最初介绍JSX的时候就已经说过了。
2.react必须在范围内，这个话的意思是你使用JSX语法，就必须要表述你现在使用的正是JSX语法，否则你写的代码就会报错，因为你所要表述的内容浏览器不认识。因此通常的做法就是在文件的开头去引用React，其作用域就是全局，因此你就可以在全局的范围中去任意的使用JSX语法，例如在下面的例子中，现在全局中去引用React，然后再去使用。
3.使用点符号去表示JSX的类型，其意思就是你现在全局中去引用React，然后再声明一个变量，里面使用对象的方式再添加一个变量，最后再用一个无状态组件去表示要呈现的内容。这样的你在引用时，就使用点符号去表示JSX的类型。
4.用户自定义组件的名称的首字母必须是大写，通常用的是大驼峰式的命名法则。如果使用的是小写，则表示的是内置的组件，然而当你运行程序的时候，内置组件中并没有这个组件，那么程序就会报错。下面通过两个实例来进行说明
在上面的两个例子中，就很好的去说明了刚才所叙述的两点。
5.运行时去选择类型，不能使用一般表达式作为React元素类型。如果您确实想使用一个通用表达式来表示元素的类型，那么只需首先将它分配给一个大写的变量。例如在下面的例子中，就很好的说明了这一点
6.props在JSX中，你可以使用任何的js表达式用{}包裹起来作为props，例如：
在这个时候props.foo的值为10，如果你使用if语句或者循环时，不能直接放在JSX中，此时你可以将这些放在JSX表达式的周围就行。例如在下面的这个例子中，就使用了if语句
7.字符串使用，可以将字符串直接使用在JSX中，例如下面的例子，其作用是等价的。
当你使用字符串的形式后，可以发生转译，因此下面的两种形式也是等价的。
8.props的默认值的true，当你没有给props赋任何值时，其props的值为true，因此下面的两种形式也是等价的
一般来说是不推荐去使用这种形式的，因为在es6中{foo}其等价于{foo:foo}，当你使用上面的这种形式后，会产生混淆。
9.传递属性，如果你的props是一个对象，你又想要通过JSX去传递，你就可以使用...将整个的props对象里面的内容进行传递，因此在下面的两个实例中，是等价的
在下面的这个实例中，该类型的props是传递是安全的使用的，并且没有传递到DOM的button中，所有的props都是通过...其他对象来进行传递的，是整个组件非常的灵活。扩展属性可能很有用，但是它们也很容易将不必要的道具传递给不关心它们的组件，或者将无效的HTML属性传递给DOM。建议谨慎使用这种语法
10.JSX Children中的一些用法
第一字符串，当你在你的组件中去包裹这种HTML中所说的文本节点时，里面的内容为字符串，并不会对里面的内容进行转义。例如在下面官方所提到写的例子中。
第二HTML中所说的文本节点的内容也会有去除空格的作用，如果你在组件标签的周围，或者是在标签中有很多空格时，在react中也会去去除空格，在下面有一些例子，其实他们的结果是等价的
你也可以在JSX中去嵌套很多的子JSX元素，你也可以将节点嵌套与组件嵌套使用在一起。
在react组件中也可以返回一个数组
11.js表达式作为包含的内容，通过{}将js表达式中的内容给包裹起来。
12.函数作为包含的内容
13.Booleans, Null, and Undefined 是被忽略的，因此在下面的这些实际例子中都是等价的。
在下面的这个例子中使用了逻辑运算符&&，但是上面的代码例子中，如果左边的式子是0是，就会打印出一个空数组，因此我们就得去使用下面的那种形式。
以上就是对于react中框架的集成与更深层次的JSX的运用
以上是 react中集成其他框架与JSX Depth 的全部内容， 来源链接： utcz.com/z/383933.html
