ES7 & Property initializer syntax & React auto bind this

property-initializer-syntax-auto-bind-this.md

ES7 & Property initializer syntax

React auto bind this

property-initializer-syntax-auto-bind-this

babel-plugin

babel-plugin-transform-class-properties

$ npm i -D babel-plugin-transform-class-properties

https://babeljs.io/docs/plugins/transform-class-properties/

    
//
class Bork {
    //Property initializer syntax
    instanceProperty = "bork";
    boundFunction = () => {
        return this.instanceProperty;
    };
    //Static class properties
    static staticProperty = "babelIsCool";
    static staticFunction = function () {
        return Bork.staticProperty;
    };
}

let myBork = new Bork;

// Property initializers are not on the prototype.
console.log(myBork.prototype.boundFunction); 
// > undefined

// Bound functions are bound to the class instance.
console.log(myBork.boundFunction.call(undefined)); 
// > "bork"

// Static function exists on the class.
console.log(Bork.staticFunction()); 
// > "babelIsCool"

.babelrc

// without options
{
    "plugins": ["transform-class-properties"]
}

// with options
{
    "plugins": [
        ["transform-class-properties", { "spec": true }]
    ]
}

property initializer syntax & arrow function

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

class LoggingButton extends React.Component {
    // This syntax ensures `this` is bound within handleClick. Warning: this is
    // *experimental* syntax.
    handleClick = () => {
        console.log('this is:', this);
    };
    render() {
        return (
            <button onClick={this.handleClick}>
                Click me
            </button>
        );
    }
}

Understanding JavaScript Bind ()

https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/

Lists & Keys

按照 React 的规范，所有的 组件数组 必须绑定 key。

https://facebook.github.io/react/docs/lists-and-keys.html#keys

const NumberList = (props) => {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
        <li key={number.toString()}>{number}</li>
    );
    return (
        <ul>{listItems}</ul>
    );
}

const numbers = [1, 2, 3, 4, 5];

ReactDOM.render(
    <NumberList numbers={numbers} />,
    document.getElementById('root')
);

When you run this code, you'll be given a warning that a key should be provided for list items.

We don't recommend using indexes for keys if the items can reorder, as that would be slow.

const ListItem = (props) => {
    // Correct! There is no need to specify the key here:
    return <li>{props.value}</li>;
};

const NumberList = (props) => {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
        // Correct! Key should be specified inside the array.
        <ListItem
            key={number.toString()}
            value={number} 
            />
    );
    return (
        <ul>
            {listItems}
        </ul>
    );
};

const numbers = [1, 2, 3, 4, 5];

ReactDOM.render(
    <NumberList numbers={numbers} />,
    document.getElementById('root')
);

A good rule of thumb is that elements inside the map() call need keys.

Recursing On Children

递归

https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children

map

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

let array = arr.map(function callback(currentValue, index, array) { 
    // Return element for new_array 
}[, thisArg]);



// 使用三个参数

const numbers = [1, 2, 3, 4, 5];

let arr = numbers.map((currentValue, index, array) => {
    console.log(`currentValue = \n`, currentValue);
    console.log(`index = \n`, index);
    console.log(`array= \n`, array);
    return currentValue * 2;
}, numbers);

console.log(`arr \n`, arr);

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.
Most often you would use IDs from your data as keys:

const todoItems = todos.map((todo) =>
    <li key={todo.id}>
        {todo.text}
    </li>
);

When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:

const todoItems = todos.map((todo, index) =>
    // Only do this if items have no stable IDs
    <li key={index}>
        {todo.text}
    </li>
);

const numbers = [1, 2, 3, 4, 5];

let arr = numbers.map((currentValue, index, array) => {
    console.log(`currentValue = \t`, currentValue);
    console.log(`index =  `, index);
    console.log(`array= `, array);
    return currentValue * 2;
}, numbers);

console.log(`\n arr = \t`, arr);

Keys used within arrays should be unique among their siblings.
However they don't need to be globally unique.

https://facebook.github.io/react/docs/lists-and-keys.html#keys-must-only-be-unique-among-siblings

https://facebook.github.io/react/docs/lists-and-keys.html#embedding-map-in-jsx

https://ant.design/components/table-cn/#注意