react 学习2

React应用的构成模块：元素和组件

在 JSX 当中的表达式要包含在大括号里。

JSX 属性

你可以使用引号来定义以字符串为值的属性

const element = <div tabIndex="0"></div>;

也可以使用大括号来定义以 JavaScript 表达式为值的属性：

const element = <img src={user.avatarUrl}></img>;

JSX 防注入攻击

React DOM 在渲染之前默认会 过滤 所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。

React.createElement()

ReactDOM.render()

React 元素都是immutable 不可变的。

In JavaScript, some built-in types (numbers, strings) are immutable, but custom objects are generally mutable.

根据我们现阶段了解的有关 React 知识，更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法：

React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分

 

组件 & Props

函数定义/类定义组件

组件可以将UI切分成一些的独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。

组件的返回值只能有一个根元素。这也是我们要用一个<div>来包裹所有<Welcome />元素的原因。

提取组件

提取组件一开始看起来像是一项单调乏味的工作，但是在大型应用中，构建可复用的组件完全是值得的。当你的UI中有一部分重复使用了好几次（比如，Button、Panel、Avatar），或者其自身就足够复杂（比如，App、FeedStory、Comment），类似这些都是抽象成一个可复用组件的绝佳选择，这也是一个比较好的做法。

Props的只读性

无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。所有的React组件必须像纯函数那样使用它们的props。

 

将函数转换为类

你可以通过5个步骤将函数组件 Clock 转换为类

1. 创建一个名称扩展为 React.Component 的ES6 类

2. 创建一个叫做render()的空方法

3. 将函数体移动到 render() 方法中

4. 在 render() 方法中，使用 this.props 替换 props

5. 删除剩余的空函数声明

将生命周期方法添加到类中

componentWillUnMount  清楚定时器

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
    }
  }
  componentDidMount(){
    console.log("componentDidMount")
    this.timerID = setInterval(()=>this.tick(),1000)
  }
  componentWillUnMount(){
    console.log("componentWillUnMount")
    clearInterval(this.timerID);
  }
  tick() {
    this.setState({
      date: new Date()
    })
  }
  render() {
    return (
      <div>
        <h1>hello word!</h1>
        <h2>{this.state.date.toLocaleTimeString()}</h2>
      </div>
    )
  }
  
}
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

正确地使用状态

不要直接更新状态  

this.setState()

状态更新可能是异步的

React 可以将多个setState() 调用合并成一个调用来提高性能。

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

状态更新合并

当你调用 setState() 时，React 将你提供的对象合并到当前状态