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样式，当跳到该页面时该标签也会改变样式。

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

巴特西

React初探

最新文章

热门文章