經(jīng)過(guò)幾天根據(jù)官方文檔和博園中一些大牛的文章，在了解過(guò)基礎(chǔ)的語(yǔ)法和組件后，總結(jié)一下：

?

1.第一件事就是分析界面，理想狀態(tài)下是讓每個(gè)組件只做一件事情，也就是單一職責(zé)，相互嵌套。我認(rèn)為：

• 　構(gòu)建組件樹(shù)，整體的構(gòu)架，把整體的各個(gè)組件羅列出來(lái)。
• 　也可以從小組件開(kāi)始寫，能夠清除的知道該組件需要什么數(shù)據(jù)，就讓該組件的父組件只傳所需要的數(shù)據(jù)。

?

2.我們要知道調(diào)用行第一次render方法的時(shí)候，聲明周期到底執(zhí)行了哪些方法?

初始化渲染：getDefaultProps

　　　　　　getInitialState

　　　　　　componentWillMount

　　　　　　render

　　　　　　componentDidMount

當(dāng)然Props或者state改變：

　　　　　　componentWillReceiveProps

　　　　　　shouldComponentUpdata?(數(shù)據(jù)發(fā)生改變返回ture執(zhí)行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 展示列表。設(shè)置了初始狀態(tài)值為空數(shù)組，onchange函數(shù)是改變數(shù)據(jù)時(shí)調(diào)用。
• 往子組件傳遞方法和數(shù)據(jù)通過(guò)props。
• 在es6 class語(yǔ)法中，change={this.onchange.bind(this)} 如果不寫bind(this)將會(huì)找不到該方法，所以需要用bind()指定上下文。當(dāng)然也可以在constructor()中設(shè)置。

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>)} }

• 通過(guò)this.props.todolist可以獲取到由父組件傳下來(lái)的數(shù)據(jù)。
• 添加data-index自定義屬性是為了獲取點(diǎn)擊后獲取位置。 我們通過(guò)e.target 可以獲取點(diǎn)擊的元素，再通過(guò)getAttribute()獲取自定義屬性的值。再刪除數(shù)組中對(duì)應(yīng)位置的數(shù)據(jù)。

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> )} }

• 以上我們用從父組件傳遞下來(lái)的change函數(shù)通過(guò)傳遞參數(shù)的形式改變了父組件的數(shù)據(jù)。

?

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

看了阮一峰老師的react-router文章以及結(jié)合了一些實(shí)例，算是有所入門。

//main.js import 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 本身就是一個(gè)容器 ?路由功能都需要它來(lái)定義。

hashHistory ：表示頁(yè)面的切換是通過(guò)url的hash的改變。

path ： 參數(shù)定義了hash的值。

component ：參數(shù)定義了訪問(wèn)的模塊內(nèi)容。

以上代碼為嵌套路由，當(dāng)我們?cè)L問(wèn)localhost:8080時(shí)，首先會(huì)加載App組件(導(dǎo)航欄)，無(wú)論如何切換頁(yè)面，該導(dǎo)航欄都會(huì)存在。然后才會(huì)去加載它的子組件Text。至于為什么是Text？那得依靠IndexRoute 。

IndexRoute ：參數(shù)表示默認(rèn)加載的子組件，如果不寫，該頁(yè)面只會(huì)展示App組件，不會(huì)展示子組件。

嵌套路由時(shí)，App組件需要如代碼標(biāo)記處一樣用this.props.childer。在切換頁(yè)面時(shí)候?qū)?huì)在該位置展示子組件。

那該如何切換頁(yè)面呢？Link組件。它取代了a標(biāo)簽，to參數(shù)指定了跳轉(zhuǎn)路徑，也即是path。該組件還可以添加activeStyle,activeClassName樣式，當(dāng)跳到該頁(yè)面時(shí) 該標(biāo)簽也會(huì)改變樣式。

?

就這么多了，任重而道遠(yuǎn)。

?

轉(zhuǎn)載于:https://www.cnblogs.com/ambitionImmortal/p/6076683.html

總結(jié)

以上是生活随笔為你收集整理的React初探的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。