Skip to content

Instantly share code, notes, and snippets.

@xyzdata
Forked from xgqfrms-GitHub/redux-simple-tutorial.md
Last active July 18, 2020 17:29
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save xyzdata/1789aee27e04e2a230105c84e98e79c2 to your computer and use it in GitHub Desktop.
redux-simple-tutorial
@xyzdata
Copy link
Author

xyzdata commented Jul 18, 2017

react+state+immutiable

https://github.com/facebook/immutable-js/wiki/Immutable-as-React-state

https://facebook.github.io/react/docs/update.html

https://facebook.github.io/react/docs/optimizing-performance.html#the-power-of-not-mutating-data

ES6 Object.assign()

function updateColorMap(colormap) {
    return Object.assign({}, colormap, {right: 'blue'});
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

ES7 object spread properties

function updateColorMap(colormap) {
    return {...colormap, right: 'blue'};
}

@xyzdata
Copy link
Author

xyzdata commented Jul 18, 2017

jira

image

@xyzdata
Copy link
Author

xyzdata commented Jul 18, 2017

http://react-china.org/t/reactjs/4716/2

import React, {Component} from 'react';

class RMT extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data || []
        };
    }
    // 递归调用
    markNode = (data) => {
        let nodes;
        if (Object.prototype.toString.call(data) == "[object Array]") {
            nodes = data.map(
                (v) => {
                    let node = (
                        <li key={this.count++}>
                            {v.text}
                        </li>
                    );
                    if (v.children && v.children.length) {
                        node = (
                            <li key={this.count++}>
                                <span>{v.text}</span>
                                {this.markNode(v.children)}
                            </li>
                        );
                    }
                    return node;
                }
            );
        }
        return (
            <ul>{nodes}</ul>
        );
    };
    render() {
        this.count = 0;
        return(
            this.markNode(this.state.data)
        );
    }
}

export default RMT;

https://www.ctolib.com/searchall/?term=node+cli&sdomain=www

https://www.ctolib.com/javascript/

@xyzdata
Copy link
Author

xyzdata commented Jul 18, 2017

@xyzdata
Copy link
Author

xyzdata commented Jul 18, 2017

React & event.preventDefault() & stopPropagation()

https://facebook.github.io/react/docs/handling-events.html

https://facebook.github.io/react/docs/events.html

https://jscomplete.com/repl

class RMT extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data || []
        };
    }
    // 递归调用
    markNode = (data) => {
        let nodes;
        if (Object.prototype.toString.call(data) == "[object Array]") {
            nodes = data.map(
                (item) => {
                    let node = (
                        <li
                            key={this.count++}
                            style={{color: 'red'}}
                            onClick={(e) => this.props.onClick(e)}
                            >
                            <span>{item.text}</span>
                        </li>
                    );
                    if (item.children && item.children.length) {
                        node = (
                            <li
                                key={this.count++}
                                style={{color: 'green', marginLeft: '10px'}}
                                onClick={(e) => this.props.onClick(e)}
                                >
                                <span>{item.text}</span>
                                {this.markNode(item.children)}
                            </li>
                        );
                    }
                    return node;
                }
            );
        }
        return (
            <ul style={{border: '1px solid red'}} onClick={this.props.onClick}>
                {nodes}
            </ul>
        );
    };
    render() {
        this.count = 0;
        return(
            this.markNode(this.state.data)
        );
    }
}

export {RMT};
export default RMT;

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // 
        };
    }
    onClick = (e) => {
        // 阻止事件的默认行为,防止事件冒泡!
        e.preventDefault();
        e.stopPropagation();
        alert(`e`, e.key);
    };
    render () {
        const datas = [
            {
                text: 'root',
                children: [
                    {
                        text: 'chlid1',
                        children: [
                            {
                                text: 'chlid3'
                            }
                        ]
                    }
                ]
            }
        ];
        return (
            <div>
                <RMT data={datas} onClick={this.onClick}/>
            </div>
        );
    }
}

ReactDOM.render(
    <div>
        <App />
    </div>
    , mountNode
);

@xyzdata
Copy link
Author

xyzdata commented Jul 18, 2017

??? how to get react li e.key ???

// import React, {Component} from 'react';
// import PropTypes from 'prop-types';

class RMT extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data || []
        };
    }
    // 递归调用
    markNode = (data) => {
        let nodes;
        if (Object.prototype.toString.call(data) == "[object Array]") {
            nodes = data.map(
                (item) => {
                    let node = (
                        <li
                            key={this.count++}
                            style={{color: 'red'}}
                            onClick={(e) => this.props.onClick(e)}
                            >
                            <span>{item.text}</span>
                        </li>
                    );
                    if (item.children && item.children.length) {
                        node = (
                            <li
                                key={this.count++}
                                style={{color: 'green', marginLeft: '10px'}}
                                onClick={(e) => this.props.onClick(e)}
                                >
                                <span>{item.text}</span>
                                {this.markNode(item.children)}
                            </li>
                        );
                    }
                    return node;
                }
            );
        }
        return (
            <ul style={{border: '1px solid red'}} onClick={this.props.onClick}>
                {nodes}
            </ul>
        );
    };
    render() {
        this.count = 0;
        return(
            this.markNode(this.state.data)
        );
    }
}

export {RMT};
export default RMT;

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // 
        };
    }
    onClick = (e) => {
        // 阻止事件的默认行为,防止事件冒泡!
        e.preventDefault();
        e.stopPropagation();
        // alert(`e`, e.key);
        console.log('e.key', e.key);
        console.log('e.text', e.text);
        console.log('e.innerHTML', e.innerHTML);
        console.log('e.innerText', e.innerText);
    };
    render () {
        const datas = [
            {
                text: 'root',
                children: [
                    {
                        text: 'chlid1',
                        children: [
                            {
                                text: 'chlid3'
                            }
                        ]
                    }
                ]
            }
        ];
        return (
            <div>
                <RMT data={datas} onClick={this.onClick}/>
            </div>
        );
    }
}

export default App;

ReactDOM.render(
    <div>
        <App />
    </div>
    , mountNode
);

@xgqfrms-GitHub
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment