ReactJs开发笔记

  • state可以设置变量
//设置state，name为变量
this.setState({
    [name]: value
})
//取值
this.state[name]
  • 传值尽量使用props,只有需要改变状态的参数放到state中。
  • 生命周期componentDidMount，componentWillReciveProps中加载函数，使用setTimeout，在componentWillUnmount中写卸载计时器
  • setState可以接收function，而不仅仅是object，可以传入prevState 
    this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));
  • function传参的两种方法 
    <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
  • function绑定this的三种方法，推荐前两种，第三种有可能会触发额外的render执行（如果要传参只能用第三种在render中绑定的方法了） 
    constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }
    handleClick = () => {
    console.log('this is:', this);
}

render() {
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
  • 获取 component 高度
如果在 componentDidMount 设置了setState，就需要在 ComponentDidUpdate 中获取内容展示完全后的高度。
  •  0的时候，依然会执行React
<div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

为避免这种情况，要确保 && 之前的表达式结果一定要是布尔值：

<div>
  {props.messages.length > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

相反,如果你想用 false, true, null, or undefined 作为输出, 你需要先转换成字符:

<div>
  My JavaScript variable is {String(myVariable)}.
</div>
  • 使用PropTypes
import PropTypes from 'prop-types';
MyComponent.propTypes = {
  // You can declare that a prop is a specific JS type. By default, these
  // are all optional.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol }
  • 事件监听
document.addEventListener(''keydown", this.handler)

document.removeEventListener(''keydown", this.handler)
  • list 的 循环 输出
const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);
let new_array = arr.map(function callback(currentValue, index, array) { 
    // Return element for new_array 
}[, thisArg])
  • 列表数据过滤
let onlineUsers = users.filter(user => user.online);
var new_array = arr.filter(callback(element[, index[, array]])[, thisArg])
  • 在 node 服务器上，使 react 解析成 html 输出
import ReactDOMServer from 'react-dom/server';

ReactDOMServer.renderToString(element)