Props Vs State

Props Vs State

The Tao of the React Component

523b00c3c60e634c61e7b121a66b3902?s=128

Eric Eldredge

November 19, 2014
Tweet

Transcript

  1. 2.

    What is a React Component? • Basically, a function that

    transforms data into HTML. • The same data always renders the same HTML. * By data, we mean props and state. * By HTML, we mean a Virtual DOM node.
  2. 3.

    MyComponent = React.createClass({ contextTypes: { previousURL: React.PropTypes.string }, propTypes: {

    expanded: React.PropTypes.bool }, getDefaultProps: function() { return {expanded: false}; }, componentWillReceiveProps: function(props) { if(props.expanded) this.setState({url: this.context.previousURL}); }, shouldComponentUpdate: function(nextProps, nextState) { return nextProps.expanded !== this.props.expanded; }, render: function() { return ( <a href="{this.state.url}" data-expanded={this.props.expanded ? '' : null} > A link </a> ); } });
  3. 5.

    What is a React Component? • A React Component is

    also a state machine • Update a component’s state by calling setState() • Or by calling setProps() (on the top component only)
  4. 6.

    What are props? • Arguments to the Component render function

    • Props come from outside the Component
  5. 7.

    var Tab = React.createClass({ render: function() { return ( <div

    className='Tab' onClick={this.props.onClick} data-active={this.props.active ? '' : null} > {this.props.children} </div> ); } }); var active = false; (function renderTab() { React.render( <Tab active={active} onClick={renderTab}> Hello, World! </Tab>, document.body ); active = !active; }());
  6. 8.

    What is State? • Also used in the Component render

    function • State is isolated inside the Component • State persists between renders
  7. 9.

    var Tab = React.createClass({ getInitialState: function() { return {active: false};

    }, handleClick: function() { this.setState({active: !this.state.active}); }, render: function() { return ( <div className='Tab' onClick={this.handleClick} data-active={this.state.active ? '' : null} > {this.props.children} </div> ); } }); (function renderTab() { React.render(<Tab>Hello, World!</Tab>, document.body); }());
  8. 15.

    Interactive Props • Some components are affected by user interactions

    • Since props are immutable, interactions that change the component must either be handled by the parent component, or translated to state
  9. 16.

    React Form Components React.createClass({ getInitialState: function() { return {value: 'Hello!'};

    }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function() { return ( <form> <input type="text" onChange={this.handleChange} /> <input type="text" value={this.state.value}/> </form> ); } });
  10. 17.
  11. 18.

    var Tab = React.createClass({ render: function() { return ( <div

    className='Tab' onClick={this.props.onClick} data-active={this.props.active ? '' : null} > {this.props.children} </div> ); } }); var active = false; (function renderTab() { React.render( <Tab active={active} onClick={renderTab}> Hello, World! </Tab>, document.body ); active = !active; }());
  12. 19.

    Uncontrolled Components • Values maintained in state • parent components

    might pass in callbacks to be notified of changes
  13. 20.

    var Tab = React.createClass({ getInitialState: function() { return {active: false};

    }, handleClick: function() { this.setState({active: !this.state.active}); }, render: function() { return ( <div className='Tab' onClick={this.handleClick} data-active={this.state.active ? '' : null} > {this.props.children} </div> ); } }); (function renderTab() { React.render(<Tab>Hello, World!</Tab>, document.body); }());
  14. 21.

    The best of both worlds: Controllables • An interactive component

    needs to maintain its own state • But sometimes it needs to yield control • Like React’s Form Components with interactive props • github.com/matthewwithanm/react-controllables
  15. 22.

    var Tab = React.createClass({ mixins: [ControllablesMixin], controllables: ['active'], getDefaultProps: function()

    {return {defaultActive: false};}, handleClick: function(event) { if (this.props.onClick) this.props.onClick(event); this.setState({active: !this.state.active}); }, render: function() { return ( <div className='Tab' data-active={this.getControllableValue('active') ? '' : null} onClick={this.handleClick} > {this.props.children} </div> ); } }); (function renderTabs(active) { React.render(<div> <Tab onActiveChange={renderTabs}>Hello, World!</Tab>, <Tab active={active}>Goodbye, World!</Tab>, </div>, document.body); }());
  16. 23.

    Finally, a word about PropTypes • Props are your Component

    API • Validate usage of your Component • Document usage of your Component
  17. 24.

    var Tab = React.createClass({ displayName: 'Tab', propTypes: { active: React.PropTypes.bool,

    onClick: React.PropTypes.func }, render: function() { return ( <div className='Tab' onClick={this.props.onClick} data-active={this.props.active ? '' : null} > {this.props.children} </div> ); } });
  18. 25.

    More words about PropTypes • React provides the most common

    PropTypes under React.PropTypes • Custom PropTypes are possible, but sometimes it’s a bit tricky to fully emulate what the builtin types do • github.com/gcanti/tcomb-validation • flowtype.org