React：usEffect——Functionale

useEffect——每次update都会调用

用于在funtional 中实现lifecycle控制；

const Cockpit =(props)=>{ useEffect(()=>{ //每次update都会被调用 console.log('[Cockpit.js] useeffect'); //Http request... }); const classes=[]; let btnClass=''; //一个指向特殊名字的指针 if(props.showPersons){ btnClass = Cssclasses.Red; } if(props.persons.length<=2){ classes.push(Cssclasses.red); //classes =['red'] } if(props.persons.length<=1){ classes.push(Cssclasses.bold); //classes =['red','bold'] } return ( <div className={Cssclasses.Cockpit}> <h1>{props.title}</h1> <p className={classes.join(' ')}>It is working!</p> <button className={btnClass} onClick={props.clicked}>Switch name </button> </div> ); };

控制useEffect在特定的时间调用

在a,b,c中有一个改变时调用effect

useEffect(()=>{ //每次update都会被调用 console.log('[Cockpit.js] useeffect'); //Http request... setTimeout(()=>{ alert('Saved data to cloud!'); },1000) },[a,b,c]);

在第一次调用effect，后面都不调用effect

useEffect(()=>{ //每次update都会被调用 console.log('[Cockpit.js] useeffect'); //Http request... setTimeout(()=>{ alert('Saved data to cloud!'); },1000) },[]); //传入作用与的对象——persons改变，调用effect //空array则只run开始那一次