React 入门实例(ruanyifeng) 发表于 2016-12-28 一、Hello World123456const { render } = ReactDOM;render( <h1>Hello, world</h1>, document.getElementById('root')) 二、JSX语法123456789101112let names = ['Alice', 'Emily', 'Kate'];render( <div> { names.map(name => { return <p>hello {name}</p> }) } </div>, document.getElementById('root')) 三、组件1234567891011121314const { Component } = React;class HelloMessage extends Component { render() { return ( <h1>Hello {this.props.name}</h1> ) }}render( <HelloMessage name='nico' />, document.getElementById('root')) 四、this.props.children12345678910111213141516171819const { Component, Children } = React;class HelloMessage extends Component { render() { return ( <ol> { Children.map(this.props.children, child=> <li>{child}</li>)} // Array.prototype.map(this.props.children, fn()) </ol> ) }}render( <HelloMessage> <span>hello</span> <span>world</span> </HelloMessage>, document.getElementById('root')) 五、defaultProps1234567891011121314class HelloMessage extends Component { static defaultProps = { name: 'nico' }; render = () => ( <h1>Hello {this.props.name}</h1> );}render(<HelloMessage />, document.getElementById('root')) 六、获取真实的节点12345678910111213class HelloMessage extends Component { handlerClick = ()=> { console.log(this.input.value) };render = ()=>( <div> <input ref={node=>this.input=node} /> <button onClick={this.handlerClick}> Clickme </button> </div> );} 七、state1234567891011121314151617class HelloMessage extends Component { state = { liked: false }; handleClick = ()=> { this.setState({ liked: !this.state.liked }) }; render = (text=this.state.liked? 'like' : 'don\'t like')=>( <p onClick={this.handleClick}> you {text} this.click to toggle </p> );} 八、表单12345678910111213141516class HelloMessage extends Component { state = { value: 'hello' };handleChange = (e)=> { this.setState({ value: e.target.value })};render = (value=this.state.value)=> ( <div> <input type='text' onChange = {this.handleChange} /> <p>{value}</p> </div>);} 九、组件生命周期12345678910111213141516171819202122232425262728293031323334353637class HelloMessage extends Component { state = { opacity: 1.0 }; componentDidMount = ()=> { this.timer = setInterval(()=>{ let opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); }, 100) }; render=()=> ( <div style={{ opacity: this.state.opacity}} > Hello {this.props.name} </div> );}/* 关于componentWillMount */// The ES5 wayvar EmbedModal = React.createClass({ componentWillMount: function() { … },});// The ES6+ wayclass EmbedModal extends React.Component { constructor(props) { super(props); // Operations usually carried out in componentWillMount go here }} Ajax123456789101112131415161718192021222324252627282930313233class UserGist extends Component { state = { username: '', lastGistUrl: '' }; componentDidMount = () => { $.get(this.props.source, (result) => { let lastGist = result[0]; this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }) }) };/* isMOunt()废弃后的解决方案 当异步加载数据的时候,使用 componentWillUnmount 来取消任何未完成的请求 在组件卸载之前 */componentWillUnmount = () => { this.serverRequest.abort(); };render = ()=>( <div> {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a> </div>);}render( <UserGist source="https://api.github.com/users/octocat/gists" />, document.body) ------本文结束感谢阅读------