如何使用react / redux设计多标签聊天？

Question

I am developing a chat platform to take multiple chats and he can switch between the chats.

var MessageList = React.createClass({
   render() {
       return (
          <div className='messages'>
          <h2> Conversation: </h2>
          {
              this.props.messages.map((message, i) => {
                  return (
                      <Message
                          key={i}
                          user={message.user}
                          text={message.text}
                      />
                  );
              })
          }
      </div>
       );
}})

Let's just take an example of message list which will change when user switches the chat tab. Re rendering the same component with new messageList with respect to the chat makes sense but when there are 100 other component changes like this when there is a switch in chat, then there will be lot of repainting/rendering.(I know only diff will be changed in the dom but still.)

I would like to create different elements for different chats and hide and show them based on active chat. But react works under a single dom and replaces the dom with what's returned where it has been attached to.

React.render(<ChatApp/>, document.getElementById('app'));

Can anyone help me up with the design here?

Thanks in advance.

Answer 1

 var Tabs = React.createClass({ displayName: 'Tabs', propTypes: { selected: React.PropTypes.number, children: React.PropTypes.oneOfType([ React.PropTypes.array, React.PropTypes.element ]).isRequired }, getDefaultProps: function () { return { selected: 0 }; }, getInitialState: function () { return { selected: this.props.selected }; }, shouldComponentUpdate(nextProps, nextState) { return this.props !== nextProps || this.state !== nextState; }, handleClick: function (index, event) { event.preventDefault(); this.setState({ selected: index }); }, _renderTitles: function () { function labels(child, index) { var activeClass = (this.state.selected === index ? 'active' : ''); return ( <li key={index}> <a href="#" className={activeClass} onClick={this.handleClick.bind(this, index)}> {child.props.label} </a> </li> ); } return ( <ul className="tabs__labels"> {this.props.children.map(labels.bind(this))} </ul> ); }, _renderContent: function () { return ( <div className="tabs__content"> {this.props.children[this.state.selected]} </div> ); }, render: function () { return ( <div className="tabs"> {this._renderTitles()} {this._renderContent()} </div> ); } }); var Pane = React.createClass({ displayName: 'Pane', propTypes: { label: React.PropTypes.string.isRequired, children: React.PropTypes.element.isRequired }, render: function () { return ( <div> {this.props.children} </div> ); } }); var App = React.createClass({ render: function () { return ( <div> <Tabs selected={0}> <Pane label="Tab 1"> <div>This is my tab 1 contents!</div> </Pane> <Pane label="Tab 2"> <div>This is my tab 2 contents!</div> </Pane> <Pane label="Tab 3"> <div>This is my tab 3 contents!</div> </Pane> </Tabs> </div> ); } }); ReactDOM.render(<App />, document.querySelector('.container')); 

 * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } body { font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #eee; margin: 0; padding: 0; } .tabs { margin: 25px; background: #fff; border: 1px solid #e5e5e5; border-radius: 3px; } .tabs__labels { margin: 0; padding: 0; } .tabs__labels li { display: inline-block; } .tabs__labels li a { padding: 8px 12px; display: block; color: #444; text-decoration: none; border-bottom: 2px solid #f5f5f5; } .tabs__labels li a.active { border-bottom-color: #337ab7; } .tabs__content { padding: 25px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div class="container"></div> 

Answer 2

You are saying redux, so I'll try to give some insight but too lazy to provide any code, since it'll be too big / complex.

Beforehand, if needed, you can use normalizr when handling with nested JSON format since redux love to be immutable and nested makes it harder to be immutable.

The reducers:

chats { userid:"", message:"", time:"" },
users { userid:"", name:"" },
app { selectedUserId:"" }

Now, the number of tabs to be rendered / displayed is equals to number of users. The selected tab is based on app.selectedUserId . The message rendered in panel will be chats, which userid equals app.selectedUserId . Some snippet:

var lo = require('lodash');
var selectedChats = lo.filter(this.props.chats, k => k.userid == app.selectedUserId);

var messagesDom = selectedChats.map(k => <MessageLine chat={k});
var chatTabsDom = this.props.users.map(k => <ChatTab userid={k.userid} className={ k.userid == app.selectedUserId ? "active" : "" }> );

return <div>
  <Tabs>{chatTabsDom}</Tabs>
  <Messages>{messagesDom}</Messages>
</div>;