React学习的一些总结

用 http://www.runoob.com/try/try.php?filename=try_react_hw 尝试

//propTypes 和 {...this.props}

var CheckLink = React.createClass({
propTypes: {
children: React.PropTypes.element.isRequired
},
render: function() {
// 这样会把 CheckList 所有的 props 复制到 <a>    // 这里必须是一个元素否则就会警告
return <a {...this.props}>{'√ '}{this.props.children}</a>;
}
});

ReactDOM.render(
<CheckLink href="/checked.html">
Click here!
</CheckLink>,
document.getElementById('example')
);

//Mixin

var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.forEach(clearInterval);
}
};

var TickTock = React.createClass({
mixins: [SetIntervalMixin], // 引用 mixin
getInitialState: function() {
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); // 调用 mixin 的方法
},
tick: function() {
this.setState({seconds: this.state.seconds + 1});
},
render: function() {
return (
<p>
React has been running for {this.state.seconds} seconds.
</p>
);
}
});

ReactDOM.render(
<TickTock />,
document.getElementById('example')
);

---------------------------------------------------------------------------====>

var TickTock = React.createClass({

getInitialState: function() {
return {seconds: 0};
},
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.forEach(clearInterval);
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); // 调用 mixin 的方法
},
tick: function() {
this.setState({seconds: this.state.seconds + 1});
},
render: function() {
return (
<p>
React has been running for {this.state.seconds} seconds.
</p>
);
}
});

ReactDOM.render(
<TickTock />,
document.getElementById('example')
);

---------------------------------------------------------------

export class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
tick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div onClick={this.tick.bind(this)}>
Clicks: {this.state.count}
</div>
);
}
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

// -----------!-------你可以使用 bind() 来绑定 `this`
<div onClick={this.tick.bind(this)}>

// 或者你可以使用箭头函数
<div onClick={() => this.tick()}>

//或者
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.tick = this.tick.bind(this);
}

现在你可以直接使用 this.tick 因为它已经在构造函数里绑定过一次了。

// 它已经在构造函数里绑定过了
<div onClick={this.tick}>

多使用es6
function HelloMessage(props) {
return <div>Hello {props.name}</div>;
}
const HelloMessage = (props) => <div>Hello {props.name}</div>;

可以使用 JSX 展开属性 来合并现有的 props 和其它值：
JSX的<Component {...this.props} more="values" />，如果不使用 JSX，
可以使用一些对象辅助方法如 ES6 的 Object.assign 或 Underscore _.extend。
React.createElement(Component, Object.assign({}, this.props, { more: 'values' }));

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

解构赋值 ，列出所有当前要使用的属性，后面跟着 ...other。

var { checked, ...other } = props;

这样能确保把所有 props 传下去，除了 那些已经被使用了的。

function FancyCheckbox(props) {
var { checked, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` 包含 { onClick: console.log } 但 checked 属性除外
return (
<div {...other} className={fancyClass} />
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
</FancyCheckbox>,
document.getElementById('example')
);

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

注意:

上面例子中，checked 属性也是一个有效的 DOM 属性。如果你没有使用解构赋值，那么可能无意中把它传下去。

在传递这些未知的 other 属性时，要经常使用解构赋值模式。

function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
// 反模式：`checked` 会被传到里面的组件里
return (
<div {...props} className={fancyClass} />
);
}

//checked被放进div，实际是不想被放入。而checked 属性又是一个有效的 DOM 属性。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－