react 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 dom 添加额外节点。
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
还有一种新的短语法可用于声明它们。
一种常见模式是组件返回一个子元素列表。以此 React 代码片段为例:
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
<Columns /> 需要返回多个 <td> 元素以使渲染的 html 有效。如果在 <Columns /> 的 render() 中使用了父 div,则生成的 HTML 将无效。
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
得到一个 <Table /> 输出:
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
Fragments 解决了这个问题。
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
这样可以正确的输出 <Table />:
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
你可以使用一种新的,且更简短的语法来声明 Fragments。它看起来像空标签:
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
你可以像使用任何其他元素一样使用 <> </>,除了它不支持 key 或属性。
使用显式 <React.Fragment> 语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子,创建一个描述列表:
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// 没有`key`,React 会发出一个关键警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}
key 是唯一可以传递给 Fragment 的属性。未来我们可能会添加对其他属性的支持,例如事件。
async/await 语法用看起来像写同步代码的方式来优雅地处理异步操作,但是我们也要明白一点,异步操作本来带有复杂性,像写同步代码的方式并不能降低本质上的复杂性,所以在处理上我们要更加谨慎, 稍有不慎就可能写出不是预期执行的代码,从而影响执行效率
$refs的使用场景:父组件调用子组件的方法,可以传递数据。$emit的使用:子组件调用父组件的方法并传递数据。$on的使用场景:兄弟组件之间相互传递数据
->用来引用一个类的属性(变量)、方法(函数);=>是用来定义数组用的;::用来直接调用类中的属性或方法,没有实例化;$this->表示实例化后调用具体对象
作为一个前端开发,在浏览别人家的页面时总是会习惯性的查看他们页面的源码,发现大多数网站的页面,包括我自己写的页面中用到的最多的布局元素无外乎就是div、p、span、ul、dl、ol、li、dt、dd、strong、b
this是JavaScript的一个关键字,函数调用时才会出现;因为函数是在一定的环境中运行的,调用函数时肯定需要知道是[谁调用的]?就用到了this进行指向;this 既不指向函数自身,也不指函数的词法作用域,而是调用函数时的对象!
标签语义化就是让元素标签做适当的事情。例如 p 标签就是代表文本,button 标签代表按钮,nav 标签代表导航等等。其实标签语义化是给浏览器和搜索引擎看的。
try-catch属于同步代码块,因此无法捕获异步(重新开辟的线程,例如定时器,异步请求)代码中的异常,即能被try-catch捕获的异常,必须是在报错时候,线程的执行进入了try-catch代码块时,才能被捕获异常
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!