Preliminary study on react

After a few days according to official documents and some Daniel's articles in Bo Yuan, after understanding the basic grammar and components, summarize:

1. The first thing to do is to analyze the interface, ideally allowing each component to do only one thing, that is, a single function, nested within each other. I think:

• Build the component tree, the overall structure, the whole of the various components listed.
• You can also write from a widget, clear the data that the component needs, and let the parent component of the component pass only the data that is needed.

2. We need to know what methods the declaration cycle executes when the first render method of the call line is made.

Initialize rendering: Getdefaultprops

Getinitialstate

Componentwillmount

Render

Componentdidmount

Of course props or state change:

Componentwillreceiveprops

Shouldcomponentupdata (data changes return ture execution render)

Componentwillupdate

Render

Componentdidupdata

3. Tried to write todolist with Es6+webpack. (Refer to the todolist of Wang Fu blog)

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

• The first is the outermost component, which includes the Typenew input box and the ListType display list. The initial state value is set to an empty array, and the onchange function is called when the data is changed.
• Pass the method and data to the subassembly through props.
• In the Es6 class syntax, Change={this.onchange.bind (this)} will not find the method if you do not write bind (this), so you need to specify the context with bind (). Of course, it can also be set in constructor ().

classListtodo extends react.component{constructor (props) {super (props); } Handleclick (e) {varDeindex=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={ind EX} onclick={ This. Handleclick.bind ( This)}>delete</button> </li>}.bind ( This))            }          </ul>        )    } }

• The data passed down by the parent component can be obtained through this.props.todolist.
• Adding Data-index Custom properties is to get the location after a click. We can get the clicked element through E.target, and then the value of the defined attribute is obtained by getattribute (). Then delete the data in the corresponding position in the array.

class Typenew extends react.component{constructor (props) {super (props);        } onsubmit (e) {e.preventdefault (); varinput= This. Refs.myinput; vartext=Input.value; varrow= 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"/> &LT;/FORM&G T        )    } }

• Above we use the change function passed from the parent component to alter the parent component's data in the form of passing parameters.

4. Attempted to join the React-router routing feature.

Read the Nanyi teacher's React-router article and combined with some examples, is a primer.

//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;//Introducing the React-router moduleImport {Router, Route, Link, Hashhistory, Indexroute, Redirect, indexlink} from ' React-router 'varI=0; class App extends React.component {constructor () {super (); } render () {return ( <div> <div> <menu mode= "Horizontal" > & Lt Menu.item key= "Mail" > <icon type= "Mail"/>navigat ion one &LT;/MENU.I tem> <menu.item key= "app" > <icon type= "AppStore"/>navigation </Menu.Item> <submenu title={<span><icon type= "setting"/& Gt                          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> <menui Temgroup title= "ItEM 2 "> <menu.item key=" setting:3 ">option 3</menu.item> &L T                      Menu.item key= "Setting:4" >option 4</menu.item> </MenuItemGroup> </SubMenu> <menu.item key= "Alipay" > <a href= "Https://ant.desig                    N "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 Compone Nt={text}/> <route path= "Component1" component={component1}/> </Route> </ro Uter>), document.getElementById ("Content"))

Router itself is a container routing feature that requires it to be defined.

Hashhistory: Indicates that the switch of the page is changed by the hash of the URL.

Path: parameter defines the value of the hash.

Component: The parameter defines the contents of the module to be accessed.

The above code is nested, when we visit localhost:8080, the app component (the navigation bar) is loaded first, regardless of the switch page, the navigation bar will exist. Then it will load its sub-component text. As for why is text? That depends on Indexroute.

Indexroute: The parameter represents a child component that is loaded by default, and if it is not, the page will show only the app components and not the subcomponents.

When nested, the app component needs to be used as this.props.childer as the code tag. Subassemblies are displayed at this location when the page is toggled.

So how do you switch pages? Link component. It replaces the a tag, and the to parameter specifies the jump path, which is also the path. The component can also add a activestyle,activeclassname style, which changes the style when the page is skipped.

That's all, it's a long way to go.

React Discussion