webstrom有個模板，只要將這個模板加入，那么下次新建react文件的時候，可以直接生成react文件。 ~~~ /** * Created by ${USER} on ${DATE}. * https://www.jetbrains.com/help/webstorm/file-template-variables.html 動畫callback只支持1.x版本的TransitionGroup */ import React,{Component} from 'react'; //import ReactDOM from 'react-dom'; //import {TweenMax} from "gsap"; //import PropTypes from 'prop-types'; class ${NAME} extends React.Component { static defaultProps = { ...Component.defaultProps } static propTypes = {} constructor(props){ super(props) this.state = {} this.dom=React.createRef() //React.createRef();current //事件綁定在es6中用于自定義事件props事件不適用 //this.handleClick = this.handleClick.bind(this); } //組件將要裝載 //componentWillMount(){} //組件加載完畢 componentDidMount(){ //this.dom.root=ReactDOM.findDOMNode(this); } //組件將接收道具 //componentWillReceiveProps(nextProps){} //shouldComponentUpdate(nextProps, nextState) {} //組件將更新 //componentWillUpdate(nextProps, nextState){} //組件更新完畢 //componentDidUpdate(nextProps, nextState){} //組件將要卸載 //componentWillUnmount(){} /*動畫*/ //componentWillAppear(callback){} //componentDidAppear(){} //componentWillEnter(callback){} //componentDidEnter(){} //componentWillLeave(callback){} //componentDidLeave(){} render() { return ( <div ref={this.dom}></div> ); } } export default ${NAME}; ~~~