20200527

React 语法

• clickCount:state.clickCount + 1
• <h 2 onClick={this.handleClick}>
• this.timer= setInterval(function() {
• style={{ opacity: this.state.opacity }}
• extends React.Component {
• this.setNewNumber = this.setNewNumber.bind(this);
• class HelloMessageContent1 extends React.Component { 写在前面
• 子组件更新父组件的state：
  需要在父组件通过创建事件句柄 (handleChange) ，并作为prop (updateStateProp) 传递到你的子组件上
• < input type=“text” value={this.props.myDataProp} onChange={this.props.updateStateProp} />
• this.setState({value:event.target.value });
• this.state = { value: 'Hello Shizukuu!'};
• < HelloMessageContent1 myDataProp={value}
  updateStateProp={this.handleChange} />
• render() {
  var value = this.state.value;

React 逻辑梳理

React 生命周期方法

componentWillMount
在渲染前调用,在客户端也在服务端。

componentDidMount
在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

componentWillReceiveProps
在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate
返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。

componentWillUpdate
在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate
在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount
在组件从 DOM 中移除之前立刻被调用。

Java Script 方法

setInterval() 方法
可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
1000 毫秒= 1 秒。
如果你只想执行一次可以使用 setTimeout() 方法。

CSS3属性

opacity

jQuery

• event.preventDefault() 方法阻止元素发生默认的行为。

例如：

当点击提交按钮时阻止对表单的提交
阻止以下 URL 的链接

运算符

= 简单的赋值运算符 c = a + b 将 a + b 的运算结果赋值为 c
+= 加法赋值运算符 c += a 等效于 c = c + a
-= 减法赋值运算符 c -= a 等效于 c = c - a
*= 乘法赋值运算符 c *= a 等效于 c = c * a
/= 除法赋值运算符 c /= a 等效于 c = c / a
%= 取模赋值运算符 c %= a 等效于 c = c % a
**= 幂赋值运算符 c **= a 等效于 c = c ** a
//= 取整除赋值运算符 c //= a 等效于 c = c // a