學習筆記 · 前端技術總結

API文檔： https://reactjs.org/ http://caibaojian.com/react/ git demo 項目 > 基于create-react-app創建的項目git地址 > 內有列表、地圖、圖標、對話框等demo > clone地址：https://github.com/z5614036/demo ，需要cnpm安裝依賴模塊文件引入模式 ~~~ <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> ~~~ 學習網站 http://wiki.jikexueyuan.com/project/react/thinking-in-react.html ## 一、高效的DOM操作 ![](https://box.kancloud.cn/5bfa6ba49116166547e5f16fed1f02f8_597x283.jpg) ## 二、組件屬性使用 ~~~ var CommentBox = React.createClass({ render: function() { console.log(this.props.children); // 你好，世界~ return ( React.createElement('div', {className: "commentBox", style: {color: this.props.color}}, "Hello, world!") ); } }); ReactDOM.render( <CommentBox color="#f00">你好，世界~</CommentBox>, document.body ); ~~~ ## 三、創建元素 1)、原生標簽 ~~~ ReactDOM.render(React.createElement('h1', {title: '123'}, 'Hello, world!'), document.body); ~~~ 結果 ~~~ <h1 data-reactroot="" title="123">Hello, world!</h1> ~~~ 2)、組件 ~~~ var CommentBox = React.createClass({ render: function() { return ( React.createElement('div', {className: "commentBox", style: {color: '#f00'}}, "Hello, world!") ); } }); ReactDOM.render( React.createElement(CommentBox, null), document.body ); ~~~ 3)、進階 ~~~ // 通過React.createElement var child = React.createElement('li', null, '這是li元素'); var root = React.createElement('ul', { style: {color: '#f00'} }, child); var App = React.createClass({ render: function() { return ( root ); } }); ReactDOM.render(<App/>, document.body); // 內置工廠方法 ReactDOM.render( React.DOM.ul({ className: 'my-list' }, React.DOM.li(null, 'Text Content') ), document.body ); // 工廠方法 var Item = React.createClass({ render: function() { return ( <div>{this.props.text}</div> ); } }); var Factory = React.createFactory(Item); var root = Factory({ text: 'this is element.' }); // var root2 = Factory({ text: 'this is node.' }); ReactDOM.render(root, document.body); ~~~ **注意**：所有的標簽(單標簽/雙標簽)都要有關閉。 ## 四、ref和props ~~~ // 利用ref來獲取元素 var App = React.createClass({ getInitialState: function() { return {userInput: ''}; }, handleChange: function(e) { this.setState({userInput: e.target.value}); }, clearAndFocusInput: function() { this.setState({userInput: ''}, function() { this.refs.theInput.focus(); }); }, render: function() { return ( <div> <button type="button" onClick={this.clearAndFocusInput}> Click to Focus and Reset </button> <input ref="theInput" value={this.state.userInput} onChange={this.handleChange} /> </div> ); } }); ReactDOM.render(<App/>, document.body); // 使用擴展操作符操作對象 var App = React.createClass({ render: function() { return ( <a style={this.props.style}>{this.props.title}</a> ); } }); var props = { title: 'hello world', style: {color: '#f00'} }; ReactDOM.render(<App {...props} />, document.body); // propsType var MyComponent = React.createClass({ propTypes: { children: React.PropTypes.element.isRequired }, render: function() { return ( <div> {this.props.children} </div> ); } }); var ChilrenComponent = React.createClass({ render: function() { return ( React.DOM.strong(null, 'hello') ); } }); ReactDOM.render(<MyComponent><ChilrenComponent/></MyComponent>, document.body); ~~~ ## 五、循環數據 ~~~ // 內置標簽 var List = React.createClass({ render: function() { var data = [ {title: 'hello'}, {title: 'world'}, {title: '~'}, ]; return ( <ul> {data.map(function(v, i) { return <li key={i}>{v.title}</li>; })} </ul> ); } }); ReactDOM.render(<List />, document.body); // 動態創建 var List = React.createClass({ render: function() { var data = [ {title: 'hello'}, {title: 'world'}, {title: '~'}, ]; return ( <ul> {data.map(function(v) { return React.createElement('li', null, v.title); })} </ul> ); } }); ReactDOM.render(<List />, document.body); // 自定義組件 var ListItem = React.createClass({ render: function() { return ( <li>{this.props.title} 需要 {this.props.course} 節課</li> ); } }); var List = React.createClass({ getInitialState: function() { return { list: [ {title: 'canvas入門介紹', course: 1}, {title: 'canvas繪圖', course: 2}, {title: 'canvas轉換', course: 1}, {title: 'canvas圖表', course: 3}, {title: 'canvas截圖', course: 1}, ] } }, render: function() { var ListItems = this.state.list.map(function(v) { return ( <ListItem title={v.title} course={v.course} /> ); }); return ( <ul> {ListItems} </ul> ); } }); ReactDOM.render( <List/>, document.body ); ~~~ ![](https://box.kancloud.cn/c57e0d6948325267fbfb3d1c9f57acbb_235x111.jpg) ## 六、渲染json文件數據，通過setState重新渲染 ~~~ var ListItem = React.createClass({ render: function() { return ( <li>{this.props.title} 需要 {this.props.course} 節課</li> ); } }); var List = React.createClass({ getInitialState: function() { return { list: [] } }, render: function() { $.getJSON(this.props.url, function(res) { this.setState({list: res}); }.bind(this)); var ListItems = this.state.list.map(function(v) { return ( <ListItem title={v.title} course={v.course} /> ); }); return ( <ul> {ListItems} </ul> ); } }); ReactDOM.render( <List url="data.json" />, document.body ); ~~~ data.json ~~~ [ {"title": "canvas入門介紹", "course": 1}, {"title": "canvas繪圖", "course": 2}, {"title": "canvas轉換", "course": 1}, {"title": "canvas圖表", "course": 3}, {"title": "canvas截圖", "course": 1} ] ~~~ ## 七、react生命周期圖 ![](https://box.kancloud.cn/2061793c8cf261f06e5b7c5e24c9e2a8_740x900.jpg) 參考鏈接：https://www.race604.com/react-native-component-lifecycle/ ## 八、登錄表單 ~~~ var LoginForm = React.createClass({ getInitialState: function() { return { username: '', password: '', style: { form: {} } } }, handleSubmit: function() { this.setState({ username: this.refs.username.value, password: this.refs.password.value }, function() { console.log(this.state); }); }, render: function () { return ( <div style={this.state.style.form}> <input type="text" placeholder="用戶名" ref="username" /><br/> <input type="password" placeholder="密碼" ref="password" /><br/> <input type="button" value="登錄" onClick={this.handleSubmit} /> </div> ); }, componentDidMount: function() { this.setState({ style: { form: { float: 'left', padding: '10px', border: '1px solid #f00' } } }); } }); ReactDOM.render( <LoginForm />, document.body ); ~~~ ![](https://box.kancloud.cn/7616c3025a914a02e697db0e171149f4_204x98.jpg) ## 九、checkbox默認選中解決 ~~~ // 方式1 React.createElement('input',{type: 'checkbox', defaultChecked: false}); // 示例 var Checkbox = React.createClass({ getInitialState: function() { return { checked: false } }, handleCheckbox: function(e) { console.log(e.target.checked); }, render: function() { return ( React.createElement('input', { type: 'checkbox', defaultChecked: this.state.checked, onChange: this.handleCheckbox }) ); } }); ReactDOM.render(<Checkbox/>, document.body); // 方式2 <input type="checkbox" id="stocked" defaultChecked={this.state.isStocked}/> ~~~ ## 十、label與checkbox配合 ~~~ // 方式1 <label><input type="checkbox" id="stocked" defaultChecked={this.state.isStocked}/>stocked</label> // 方式2 能過htmlFor屬性 input type="checkbox" id="stocked" defaultChecked={this.state.isStocked}/> <label htmlFor="stocked">stocked</label> ~~~ ## 十一、setState流程 ![](https://box.kancloud.cn/eb0201605899d1e266c73d4ad4bcc130_1371x917.png) ## 十二、子父組件傳值 ~~~ //子組件 var Child = React.createClass({ render: function(){ return ( <div> 郵箱：<input onChange={this.props.handleEmail}/> </div> ) } }); //父組件 var Parent = React.createClass({ getInitialState: function(){ return { email: '' } }, handleEmail: function(event){ this.setState({email: event.target.value}); }, render: function(){ return ( <div> <div>郵箱：{this.state.email}</div> <Child name="email" handleEmail={this.handleEmail.bind(this)}/> </div> ) } }); React.render( <Parent />, document.getElementById('test') ); ~~~ 在React中setState不是每次調用就立刻渲染的。他們的隊列的順序也在一次事件之內進行結算（比如在click事件過程中可能有很多setState在等待，等Click事件完成之后，setState這個隊列里面的內容就開始進行結算了），所以setState多次調用并不會導致渲染多次。但是事務的次數可能會導致渲染。 **參考鏈接：** React之ref詳細用法：https://segmentfault.com/a/1190000008665915