react组件内容补充

1、当我们在vue中不想让某个标签被其他元素包裹,我们可以使用template包裹元素,而在小程序中我们可以使用block标签包裹其他元素,我们也可以看到此标签不展示,那么我们接下来在react中我们可以使用Fragment标签,接下来详细讲下Fragment
Fragment

<Fragment>
  <h2>拉三季度</h2>
  <ul>
     <li>了撒娇大</li>
   </ul>	
</Fragment>

简写形式,但是我们如果简写形式的话如果我们需要添加key那么简写形式是不支持的

<>
 <h2>拉三季度</h2>
  <ul>
    {
     this.state.friends.map(item,index)=>{
     	return(
     	/**不可以使用<>如下简写形式*/
     		<Fragment key="item.id">
     		 	<h3>卡回电话</h3>
     		  	<button></button>
            </Fragment>
         )
     }
    }
   </ul>
   
</>

2、我们新建项目的时候index.js中会有如下代码:
React.StrictMode
开启严格模式只会在开发模式下起作用,只会对后代元素进行检查,也就是他包裹之内的

ReactDOM.render(
  <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
)

严格模式作用(它是一个用来突出显示应用程序中潜在问题的工具)
(1)跟Fragment一样,StrictMode不会渲染任何可见的UI;
(2)为后代元素触发额外的检查和警告´;
(3)检查尽在开发模式下运行;不会影响生产构建。
严格模式检查如下:
①识别不安全的生命周期
②使用过时的ref API
③检查意外的副作用。
⑴组件的constructor会被调用两次;
⑵严格模式下故意进行的操作,来查看在这里写的代码逻辑被多次调用时,是不是会产生副作用。
⑶在生产环境中是不会被调用两次的。
④使用废弃的findDOMNode方法
在之前的React API中,可以通过findDOMNode来获取DOM,不过已经不推荐使用了。
⑤检测过时的contextAPI
⑴早期Context是通过static属性声明Context对象属性,通过getChildContex返回Context对象等方式来使用Context的;目前已经不推荐使用了。

你可能感兴趣的:(react.js,javascript,前端)