React初探

经过几天根据官方文档和博园中一些大牛的文章，在了解过基础的语法和组件后，总结一下：

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,);
        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.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 本身就是一个容器  路由功能都需要它来定义。

hashHistory ：表示页面的切换是通过url的hash的改变。

path ： 参数定义了hash的值。

component ：参数定义了访问的模块内容。

以上代码为嵌套路由，当我们访问localhost:8080时，首先会加载App组件(导航栏)，无论如何切换页面，该导航栏都会存在。然后才会去加载它的子组件Text。至于为什么是Text？那得依靠IndexRoute 。

IndexRoute ：参数表示默认加载的子组件，如果不写，该页面只会展示App组件，不会展示子组件。

嵌套路由时，App组件需要如代码标记处一样用this.props.childer。在切换页面时候将会在该位置展示子组件。

那该如何切换页面呢？Link组件。它取代了a标签，to参数指定了跳转路径，也即是path。该组件还可以添加activeStyle,activeClassName样式，当跳到该页面时 该标签也会改变样式。

就这么多了，任重而道远。