react 常用小记

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

// 父组件传值到子组件中。<br><br>class WebSite extends React.Component {   constructor() {       super();          this.state = {         name: "菜鸟教程",         site: "https://www.runoob.com"       }     }   render() {     return (       <div>         <Name name={this.state.name} />         <Link site={this.state.site} />       </div>     );   } }          class Name extends React.Component {   render() {     return (       <h1>{this.props.name}</h1>     );   } }    class Link extends React.Component {   render() {     return (       <a href={this.props.site}>         {this.props.site}       </a>     );   } }    ReactDOM.render(   <WebSite />,   document.getElementById('example') );

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

//react 生命周期<br><br>class Clock extends React.Component {   constructor(props) {     super(props);     this.state = {date: new Date()};   }      componentDidMount() {       //这在 React 中被称为<strong>挂载 (请求数据在此方法中)</strong>     this.timerID = setInterval(       () => this.tick(),       1000     );   }      componentWillUnmount() {      //这在 React 中被称为<strong>卸载</strong>     clearInterval(this.timerID);   }      tick() {     this.setState({       date: new Date()     });   }      render() {     return (       <div>         <h1>Hello, world!</h1>         <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>       </div>     );   } }    ReactDOM.render(   <Clock />,   document.getElementById('example') );