React初探

標籤：存在   port   listt   cli   結合   todo   nts   design   傳遞參數   

經過幾天根據官方文檔和博園中一些大牛的文章，在瞭解過基礎的文法和組件後，總結一下：

 

1.第一件事就是分析介面，理想狀態下是讓每個組件只做一件事情，也就是單一職責，相互嵌套。我認為：

• 　構建組件樹，整體的構架，把整體的各個組件羅列出來。
• 　也可以從小工具開始寫，能夠清除的知道該組件需要什麼資料，就讓該組件的父組件只傳所需要的資料。

 

2.我們要知道調用行第一次render方法的時候，聲明周期到底執行了哪些方法?

初始化渲染：getDefaultProps

　　　　　　getInitialState

　　　　　　componentWillMount

　　　　　　render

　　　　　　componentDidMount

當然Props或者state改變：

　　　　　　componentWillReceiveProps

　　　　　　shouldComponentUpdata (資料發生改變返回ture執行render)

　　　　　　componentWillUpdate

　　　　　　render

　　　　　　componentDidUpdata　

 

3.嘗試了用es6+webpack 寫todolist。 (參考了王福朋部落格的todolist)

class Text extends React.Component{        constructor(){        super();         this.state={            todolist:[]        }    }    onchange(row){        this.setState({            todolist:row        })    }    render(){                return(           <div>               <TypeNew change={this.onchange.bind(this)} todolist={this.state.todolist}/>               <ListTodo change={this.onchange.bind(this)} todolist={this.state.todolist}/>           </div>        )    } }

• 首先是最外層的組件，裡麵包括了TypeNew 輸入框,ListType 展示列表。設定了初始狀態值為空白數組，onchange函數是改變資料時調用。
• 往子組件傳遞方法和資料通過props。
• 在es6 class文法中，change={this.onchange.bind(this)} 如果不寫bind(this)將會找不到該方法，所以需要用bind()指定上下文。當然也可以在constructor()中設定。

class ListTodo extends React.Component{        constructor(props){        super(props);               }    handleclick(e){        var deIndex=e.target.getAttribute("data-index")        this.props.todolist.splice(deIndex,1);        this.props.change(this.props.todolist)    }    render(){               return(           <ul>            {                this.props.todolist.map(function(item,index){                    return <li className="list-border" key={index}>                        <label>{item}</label>                        <button data-index={index} onClick={this.handleclick.bind(this)}>delete</button>                    </li>                }.bind(this))            }          </ul>        )    } }

• 通過this.props.todolist可以擷取到由父組件傳下來的資料。
• 添加data-index自訂屬性是為了擷取點擊後擷取位置。 我們通過e.target 可以擷取點擊的元素，再通過getAttribute()擷取自訂屬性的值。再刪除數組中對應位置的資料。

class TypeNew extends React.Component{        constructor(props){        super(props);              }    onsubmit(e){        e.preventDefault();        var input=this.refs.myinput;        var text=input.value;        var row= this.props.todolist;        if(text !==""){            row.push(text)            this.props.change(row)            input.value=""        }            }    render(){                return(           <form onSubmit={this.onsubmit.bind(this)}>                 <input ref="myinput" type="text" placeholder="typing a newthing todo"  />         </form>        )    } }

• 以上我們用從父組件傳遞下來的change函數通過傳遞參數的形式改變了父組件的資料。

 

4.嘗試加入了react-router 路由功能。

看了阮一峰老師的react-router文章以及結合了一些執行個體，算是有所入門。

//main.jsimport React from ‘react‘;import ReactDom from ‘react-dom‘;import Component1 from ‘./components/Component1.jsx‘;import Text from ‘./components/Text.jsx‘;import { Menu, Icon } from ‘antd‘;import "antd/dist/antd.min.css" const SubMenu = Menu.SubMenu;const MenuItemGroup = Menu.ItemGroup;// 引入React-Router模組import { Router, Route, Link, hashHistory, IndexRoute, Redirect, IndexLink} from ‘react-router‘var i=0;class App extends React.Component {     constructor(){        super();           }          render(){        return (              <div>                          <div>                    <Menu  mode="horizontal">                      <Menu.Item key="mail">                        <Icon type="mail" />Navigat ion One                      </Menu.Item>                      <Menu.Item key="app" >                        <Icon type="appstore" />Navigation Two                      </Menu.Item>                      <SubMenu title={<span><Icon type="setting" />Navigation Three - Submenu</span>}>                        <MenuItemGroup title="Item 1">                          <Menu.Item key="setting:1"><IndexLink to="/" activeClassName=”active“ >Option 1</Link></Menu.Item>                          <Menu.Item key="setting:2"><Link to="/Component1" activeStyle={{color: ‘red‘}} >Option 2</Link></Menu.Item>                        </MenuItemGroup>                        <MenuItemGroup title="Item 2">                          <Menu.Item key="setting:3">Option 3</Menu.Item>                          <Menu.Item key="setting:4">Option 4</Menu.Item>                        </MenuItemGroup>                      </SubMenu>                      <Menu.Item key="alipay">                        <a href="https://ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>                      </Menu.Item>                    </Menu>              </div>              <div>               { this.props.children }              </div>            </div>        )    }}ReactDom.render(     (       <Router history={hashHistory}>        <Route path="/" component={App}>               <IndexRoute    component={Text} />              <Route  path="Component1" component={Component1} />         </Route>      </Router>     ),     document.getElementById("content"))

 

Router 本身就是一個容器  路由功能都需要它來定義。

hashHistory ：表示頁面的切換是通過url的hash的改變。

path ： 參數定義了hash的值。

component ：參數定義了訪問的模組內容。

以上代碼為嵌套路由，當我們訪問localhost:8080時，首先會載入App組件(導覽列)，無論如何切換頁面，該導覽列都會存在。然後才會去載入它的子組件Text。至於為什麼是Text？那得依靠IndexRoute 。

IndexRoute ：參數表示預設載入的子組件，如果不寫，該頁面只會展示App組件，不會展示子組件。

嵌套路由時，App組件需要如代碼標記處一樣用this.props.childer。在切換頁面時候將會在該位置展示子組件。

那該如何切換頁面呢？Link組件。它取代了a標籤，to參數指定了跳轉路徑，也即是path。該組件還可以添加activeStyle,activeClassName樣式，當跳到該頁面時 該標籤也會改變樣式。

 

就這麼多了，任重而道遠。

 

React初探