Awesome Open Source
Awesome Open Source

react-antd()

React Native Redux Redux Immutablejs Ant Design

MIT

vue + vuex + less + ES6/7 + webpack + fetch + vue-router + store + element-uiSPA

Redux-Redux

Immutable-Immutable

webpack2Yarnhappypackrebuild

Redux

react + redux + immutable + less + ES6/7 + webpack2.0 + fetch + react-router + antd(1.x)SPA

star

8:009:30, 24:00segmentfault

demo

react + redux + immutable + less + ES6/7 + webpack2.0 + fetch + react-router + antd(1.x)

JS/React/Vue/Angular 599399742

    [email protected]

http://www.sosout.com/

http://blog.sosout.com/

http://www.jianshu.com/users/23b9a23b8849/latest_articles

segmentfaulthttps://segmentfault.com/u/sosout

# git clone

git clone https://github.com/sosout/react-antd.git

cd react-antd


// nodenpm

// ,npmnode_modules
yarn install

yarn run dev 
  
yarn run dist css

http://127.0.0.1:8888

  • [x]
  • [x]
  • [x]
  • [ ] ()
  • [ ]

2017.02.20

1. ;

2. webpack(webpack2.0)yarnhappypack()

3. ;

4. ;

5. ();

React

1this

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({
            count: ++this.state.count
        });
    }

    render() {
        return (
        <div>
            <div>{this.state.count}</div>
            <button onClick={this.handleClick}>Click</button>
        </div>
        );
    }
}

renderthis: this.handleClick = this.handleClick.bind(this)handleClickthisundefinedES6 ES6 Class this

2

ES7 property initializers

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }

    handleClick = () => {
        this.setState({
            count: ++this.state.count
        });
    }

    render() {
        return (
        <div>
            <div>{this.state.count}</div>
            <button onClick={this.handleClick}>Click</button>
        </div>
        );
    }
}

thisCreate React App babeltransform-class-properties

3

class MyComponent extends React.Component {
    render() {
        return (
        <button onClick={()=>{console.log('button clicked');}}>
            Click
        </button>
        );
    }
}

onClickrenderrender

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    handleClick() {
        this.setState({
            count: ++this.state.count
        });
    }
    render() {
        return (
        <div>
            <div>{this.state.number}</div>
            <button onClick={()=>{this.handleClick();}}>Click</button>
        </div>
        );
    }
}

renderrenderthisthis

4

Event

thisthisrenderthis

// 6
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        list: [1,2,3,4],
        current: 1
        };
    }

    handleClick(item) {
        this.setState({
            current: item
        });
    }

    render() {
        return (
        <ul>
            {this.state.list.map(
                (item)=>(
                <li className={this.state.current === item ? 'current':''} 
                onClick={this.handleClick.bind(this, item)}>{item}
                </li>
                )
            )}
        </ul>
        );
    }
}
// 7
class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [1,2,3,4],
            current: 1
        };
    }

    handleClick = (item) =>  {
        this.setState({
            current: item
        });
    }

    render() {
        return (
        <ul>
            {this.state.list.map(
                (item)=>(
                <li className={this.state.current === item ? 'current':''} 
                onClick={this.handleClick.bind(undefined, item)}>{item}
                </li>
                )
            )}
        </ul>
        );
    }
}

bindthisbind

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [1,2,3,4],
            current: 1
        };
    }

    handleClick(item,event) {
        this.setState({
            current: item
        });
    }

    render() {
        return (
        <ul>
            {this.state.list.map(
                (item)=>(
                <li className={this.state.current === item ? 'current':''} 
                onClick={(event) => this.handleClick(item, event)}>{item}
                </li>
                )
            )}
        </ul>
        );
    }
}

EventReactEventEvent67handleClickEventarguments[1]Event

thisES7Babelthis

Immutable React (https://github.com/camsong/blog/issues/3)

react pure renderbind(this)

export default class Parent extends Component {
...
  render() {
    const {name,age} =this.state;
    return (
      <div>
    <Child name={name} age={age} onClick={this._handleClick.bind(this)}></Child>//bug 
      </div>
    )
  }
...
}

ChildrerenderChildpropsrerenderimmutable.jsrender_handleClickbind(this) _handleClickChildprops bindthis render bindthisconstructor

export default class Parent extends Component {
  constructor(props){
    super(props)
    this._handleClick=this._handleClick.bind(this)//
  }
  render() {
    const {name,age} =this.state;
    return (
      <div>
        <Child name={name} age={age} onClick={this._handleClick}></Child>
      </div>
    )
  }
...
}

rerender

rerenderrerenderprops state virtual dom diff

class Child  extends Component {
  render() {
    console.log("re-render");
    const {name,age} = this.props;

      return (
        <div>
          <span>:</span>
          <span>{name}</span>
          <span> age:</span>
          <span>{age}</span>
        </div>
      )
  }
}
const Person = pureRender(Child);

pureRenderComponentComponentComponentpureRender

function shouldComponentUpdate(nextProps, nextState) {
  return shallowCompare(this, nextProps, nextState);
}

function pureRende(component) {
  component.prototype.shouldComponentUpdate = shouldComponentUpdate;
}
module.exports = pureRender;

pureRendercomponentshouldComponentUpdateshouldComponentUpdatereturn tureshallowCompareshallowCompare

function shallowCompare(instance, nextProps, nextState) {
  return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState);
}  

props&stateprops&stateshallowEqualprops&statereturn false


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Reactjs (75,823
Redux (13,331
Es6 (5,348
React Router (3,353
React Redux (2,249
Less (1,861
Admin (1,521
Ant Design (910
Webpack2 (815
Immutable (558
Es7 (281
Related Projects