React & Component

React 简介与升级

Transcript

1. React & Component ᡡᇌ
2. React ՗فᳪکන୒ A Facebook & Instagram collaboration.
3. # React
4. React • Web Component • Just View • Finite State Machine • Virtual DOM
5. Web Component <input type="checkbox" value="yes" checked="checked" /> <select> <option value="1">1</option> <option value="2" selected="selected">2</option> </select> new ScrollList({ container: '.scroll-list', data: [] }).render(); <SearchSuggest value="۹Ղ" source={this.source} /> <ScrollList data={this.data} /> DOM: React: Component:
6. Just View render() { return ( <div> <SearchSuggest source={this.source} /> <ScrollList data={this.data} /> </div> ); } return (SingleComponent || Array)
7. Finite State Machine render() { return ( <div> <SearchSuggest source={this.source} /> {this.state.showList ? ( <ScrollList data={this.data} /> ) : null} </div> ); }
8. Virtual DOM render() { return ( <div> <SearchSuggest source={this.source} /> {this.state.showList ? ( <ScrollList data={this.data} /> ) : null} </div> ); } this.setState({ showList: true });
9. Props & State defaultProps = { width: 100, height: 200 }; constructor() { super(); this.state = { visible: true }; } <Overlay width={300} height={300} onClose={this.onClose} /> render() { return ( {this.state.visible ? ( <div style={{ width: this.props.width, height: this.props.height }}></div> ) : null} ); } close() { this.setState({ visible: false }); this.props.onClose(); }
10. vs. Kissy ATTRS ATTRS = { width: { value: 100 }, height: { value: 200 }, visible: { value: true } }; this.set('width', 300); this.set('visible', false); 配置参数与ᕟ件状ா混淆 this.after('visibleChange', function(e) { e.newValue ? this.show() : this.hide(); }); 手动管理ى联状ா与UI
11. DOM Props render() { return ( {this.state.visible ? ( <div ref="container" className="container" style={{ width: this.props.width, height: this.props.height }} > </div> ) : null} ); } this.refs.container.addEventListener('click', () => {}, false);
12. ClassName className="container" import styles from “./index.scss"; className={styles.container} import ClassNames from "classnames/bind"; let cx = ClassNames.bind(styles); className={cx({ container: true, hidden: !this.state.visible })} import CSSModules from 'react-css-modules'; @CSSModules(styles); styleName="container" // class="container" // class="overlay__container___1K9zE" // class="overlay__container___1K9zE overlay__hidden___1K8jY" // class="overlay__container___1K9zE"
13. Event System render() { return ( <div ref="container" className="container" onClick={this.onClick.bind(this)} onTouchTap={this.onTap.bind(this)} > </div> ); }
14. SyntheticEvent console.log({...e}); e.nativeEvent.preventDefault();
15. LifeCycle: React vs. Kissy class Overlay extends React.Component { static propTypes = { width: React.PropTypes.number }; static defaultProps = { width: 200 }; constructor() { super(); this.state = { visible: true }; }; componentWillMount() {}, render(), componentDidMount(), componentWillUpdate(), componentDidUpdate(), componentWillUnmount(), }; Base.extend({ initializer() {}, renderUI() {}, bindUI() {}, syncUI(){}, destroy() {} }, { ATTRS: { width: { value: 200, validator: S.isNumber } } });
16. componentWillReceiveProps defaultProps = { visible: false }; constructor() { super(); this.state = { visible: this.props.visible }; } componentWillReceiveProps(nextProps) { if (this.props.visible !== nextProps.visible) { this.setState({ visible: nextProps.visible }); } } render() { return ( {this.state.visible ? ( <div style={this.props.style}></div> ) : null} ); } render() { return ( <Overlay visible={this.state.active} /> ); } 子ᕟ件 父ᕟ件
17. Pass Props render() { return ( <form> <input type="input" {...this.props} /> <button>ݐၾ</button> </form> ); } let { onValueChange, ...inputProps } = this.props; render() { return ( <form> <input type="input" {...inputProps} /> <button>ݐၾ</button> </form> ); } <SearchInput placeholder=“൤ᔱ" value="۹Ղ" onValueChange={this.change} />
18. Child Event render() { return ( <form> <input ref="input" type=“input" value={this.state.value} {...this.props} onInput={() => this.setState({ value: this.refs.input.value })} /> {this.state.value ? (<button>x</button>) : null } </form> ); }
19. Children render() { return ( {this.state.visible ? ( <div>{this.props.children}</div> ) : null} ); } <Overlay visible="true"> <p>౯ฎٖ਻౯ฎٖ਻</p> <p>౯ฎٖ਻౯ฎٖ਻</p> <p>౯ฎٖ਻౯ฎٖ਻</p> </Overlay> React.Children.map(this.props.children, fn); React.Children.forEach(this.props.children, fn);
20. Performance render() { return ( {this.state.visible ? ( <div>{this.props.children}</div> ) : null} ); } render() { return ( <div className={this.state.visible : '' : 'hidden'}> {this.props.children} </div> ); } 避免过多生成ᲀ毁 优先样式展示ᵌ藏
21. key render() { return ( <ul> {this.props.items.map((item, index) => { return (<li key={'item_' + index}>{item.name}</li>) })} </ul> ); } 方便DOMᜓ点重复利用
22. shouldComponentUpdate shouldComponentUpdate(nextProps, nextState) { if (this.state.visible !== nextState.visible) { return true; } return false; } 必要的时候才更新UI 但state多的时候不好管理
25. # ReactNative
26. learn once, write everywhere!
27. Native vs. Web • View -> div • Text -> span • Image -> img, background-image • TextInput -> input • TouchableHighlight -> div.onclick • AsyncStorage -> localStorage • …
29. Styles
30. getStyles
31. !zIndex https://www.npmjs.com/package/react-native-order-children
32. # React <=> RN EZ…
33. # ?PI
35. Join us!!!
36. THE END.