mdn W3C標(biāo)準(zhǔn)網(wǎng)站

運(yùn)行sass

cnpm i -D node-sass-chokidar npm-run-all

rem單位設(shè)置

<script>//rem單位設(shè)置document.documentElement.style.fontSize = (window.innerWidth)/750 * 100 + 'px'; </script>

mock數(shù)據(jù)

1.下載mockjscnpm i -D mockjs 2.引入mockjsvar Mock = require('mockjs'); var fs = require('fs'); 3.給出隨機(jī)數(shù)據(jù) Mock.Random.extend({ title:()=>Mock.Random.pick([1,2,3,4,5,6,7,8,9]) }) 4.隨機(jī)數(shù)據(jù)結(jié)果 var data = Mock.mock({ 'arr|1-20':[{ 'id|+1':1, 'title':'@title' }] }) 5.寫入文件data.json fs.writeFile('./data.json',JSON.stringify(data),()=>{}) // 即出來相應(yīng)的JSON數(shù)據(jù)

React 組件生命周期

1.組件的生命周期可分為三個(gè)狀態(tài)：1).Mounting: 已插入到真實(shí)DOM2).Updating:正在被重新渲染 3).Unmounting：已移出真實(shí)DOM 2.生命周期的方法有： 1)componentWillMount 在渲染前調(diào)用，在客戶端，也在服務(wù)端 2)componentDidMount:在第一次渲染后調(diào)用，只在客戶端 //之后組件已經(jīng)生成了對(duì)應(yīng)的DOM結(jié)構(gòu)，可以通過this.getDOMNode()來進(jìn)行訪問。 如果你想和其他JavaScript框架一起使用，可以在這個(gè)方法中調(diào)用setTimeout, setInterval或者發(fā)送AJAX請(qǐng)求等操作(防止異部操作阻塞UI)。 3)componentWillReceiveProps在組件接收到一個(gè)新的prop(更新后)時(shí)被調(diào)用。這個(gè)方法在初始化render時(shí)不會(huì)被調(diào)用。 4)shouldComponentUpdate 返回一個(gè)布爾值。在組件接收到新的props或者state時(shí)被調(diào)用。在初始化時(shí)或者使用forceUpdate時(shí)不被調(diào)用。 可以在你確認(rèn)不需要更新組件時(shí)使用。 5)componentWillUpdate在組件接收到新的props或者state但還沒有render時(shí)被調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。 6)componentDidUpdate 在組件完成更新后立即調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。 7)componentWillUnmount在組件從 DOM 中移除的時(shí)候立刻被調(diào)用。 8)ReactDOM.unmountComponentAtNode(document.getElementById('root')) // 組件初始化的時(shí)候 created constructor(props) { super(props) } // 組件掛載之前 beforeMount componentWillMount() { } // 組件掛載完成 mounted componentDidMount() { } // 組件將要接收新的props Vue沒有的 // 執(zhí)行完成之后，this.props指向新的props // 唯一一個(gè)和props相關(guān)的生命周期 componentWillReceiveProps(nextProps) { // 舊的props this.props // 新的props nextProps } // 通過返回值判斷組件是否需要更新，用于React優(yōu)化Vue沒有的 // true更新，false不更新 shouldComponentUpdate(nextProps, nextState) { // 舊的props this.props // 新的props nextProps // 舊的state this.state // 新的state nextState } // 組件將要更新 beforeUpdate componentWillUpdate(nextProps, nextState) { } // 組件更新完成 Updated componentDidUpdate(prevProps, prevState) { } // 組件將要卸載 componentWillUnmount() { }

卸載組件

1.掛載到Dom上時(shí)ReactDom.unMountComponentAtNode(節(jié)點(diǎn)) 2.掛載在一個(gè)節(jié)點(diǎn)上不渲染，等于null即可

組件

容器組件 有state數(shù)據(jù)管理 視圖組件 沒有state（class或函數(shù)） // 函數(shù)(props通過函數(shù)的參數(shù)接收)(props)=>{}

ReactDOM.render()渲染組件時(shí)返回的是組件實(shí)例；

而渲染dom元素時(shí)，返回是具體的dom節(jié)點(diǎn)

this.refs 和 ReactDOM.findDOMNode區(qū)別

this.refs 獲得的是虛擬DOM，而ReactDOM.findDOMNode 獲得的是實(shí)際DOM。1.ref添加到Compoennt上獲取的是Compoennt實(shí)例，添加到原生HTML上獲取的是DOM2.ReactDOM.findDOMNode，當(dāng)參數(shù)是DOM，返回值就是該DOM；當(dāng)參數(shù)是Component獲取的是該Component render方法中的DOM

refs vue中獲取ref this.$refs.input

react獲取ref this.refs.input.value<input type='text' ref='input'/>

生命周期階段

實(shí)例化時(shí)期 react組件在實(shí)例化時(shí)會(huì)依次調(diào)用如下組件方法：getDefaultProps getInitialState componentWillMount render componentDidMount存在期 當(dāng)react組件被實(shí)例化后，用戶的一些操作會(huì)導(dǎo)致組件狀態(tài)的更新，此時(shí)如下方法將依次被調(diào)用：componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate銷毀時(shí)期 在組件銷毀的時(shí)候，會(huì)調(diào)用如下組件方法：componentWillUnmount

轉(zhuǎn)載于:https://www.cnblogs.com/2oex/p/9569178.html

總結(jié)

以上是生活随笔為你收集整理的React之mockjs+sass+生命周期函数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。