[React]核心概念

本文是对React文档：核心概念部分的笔记，内容大致与文档相同。
文档链接
React哲学部分写的很好，务必要看

JSX

JSX是JS的语法扩展，配合react使用，为JS和HTML的混写
JSX支持在大括号({})中书写任何有效JS表达式
同时，JSX也是一个表达式
如下面的例子：

const name="josh perez"
const element=<h1>Hello,{name}</h1>
      ReactDOM.render(
      element,
      document.getElementById("root")
      );

在属性中嵌入表达式有两种方法:

//使用引号包裹的字面值
const element =<div tabIndex="0"></div>
//使用花括号包裹的表达式
const element=<img src={user.name}></img>

JSX的属性名称使用小驼峰命名，如class->className
React在渲染已经输入的内容前，会默认进行转义，所有的内容在渲染前已经被转换为字符串，可以有效防止XSS
JSX对象:
Babel将会把JSX转译为一个名为React.createElement()的函数调用
即：

const element=(
    <h1 className="greet">
    hello
   </h1>
);
//与下面的写法相同
const element=React.createElement(
    "h1",
  {className:"greet"},
  "hello"
);
//它事实上创建了一个简化的如下的对象：
const element={
    type:"h1",
  props:{
    className:"greet",
    children:"hello"
  }
};

它们也被称为React元素,描述了希望在屏幕上看到的内容，React通过读取这些对象来使用他们构建DOM

元素渲染

元素是构成React应用的最小块
React元素是创建开销很小的普通对象。React DOM更新DOM来与React元素保持一致

React 根 DOM 节点

React 根 DOM 节点大概是类似这样的结构：

这个节点内的所有内容都由React DOM管理。 对于根DOM节点，使用ReactDOM.render()进行渲染

const element=<h1>hello</h1>
ReactDOM.render(element,document.getElementById("root"));//root就是根DOM节点的id值

React元素是不可改变对象，一旦被创建就不能修改。更新UI的唯一方法就是创建一个全新的元素。

React 更新策略

React DOM只会进行必要的更新来使DOM达到新的状态。
这种策略只考虑UI在一个指定时间的状态，而不考虑变化的过程，可以减少bug。

组件&props

组件即为代码复用的片段，类似于函数。

组件形式

组件有两种形式：函数和class

//函数组件
function Welcome(props){
    return <h1>hello,{props.name}</h1>
}
//ES6-class
class Welcome extends React.Component{
    render(){
  return(
    <div>
        hello,{this.props.name}
    </div>
  );
  }
}

渲染组件

React元素可以是DOM标签、或者是用户自己定义的组件
当用户自定义组件，它会将JSX接收道德属性以及子组件转换为单个对象传递给组件，即props
看如下例子：

class Welcome extends React.Component{
    render(){
  return(
    <div>
        hello,{this.props.name}
    </div>
  );
  }
}
const elemen=<Welcome name="柳刀" />
ReactDOM.render(
  element,
  document.getElementById('root')
);

页面会渲染出：hello,柳刀
注意：自定义标签的名称必须为大写，React将会把小写字母开头的组件视为原生DOM组件。

组件的组合与提取

组件可以进行嵌套组合
通常每个新的React应用程序的顶层组件都应该是App组件
对于一些使用程度叫较高的组件，应该进行额外的定义以使组件更容易维护。

props只读

所有的React组件都必须保护它们的props不被更改

state&生命周期

state与props相似，但是可以完全受控与当前的组件。
组件第一次被渲染到DOM中时，被称为“挂载”(mount)
DOM中组件被删除的时候，应该清除计时器，被称为“卸载”(unmount)
见如下的时钟的例子：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
    //生命周期方法
  //在组件已经被渲染到DOM中后运行
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
//在组件即将被卸载时调用
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
  //计时器函数，通过这个函数更新state
  tick() {
    this.setState({
      date: new Date()
    });
  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

state

state只能在组件初始化时进行赋默认值
state={}
或者在构造函数中进行构造；
state不能在除了以上两个地方之外使用 this.state.xxx 进行更新
只能使用
this.setState({xxx:xxx}) 进行更新

state的更新可能是异步的

React可能会将多个setState()合并为一个调用，而且props,state也可能异步更新，所以不应该依赖它们的值去决定下一个状态。
如：

//wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});
为了解决该问题，可以使用:
// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

使用参数对state进行更新

state的更新会被合并

为了提高性能，React将setState()合并调用，这里的合并是浅合并，简而言之，就和单独调用他们的效果是一样的。

数据是向下流动的

这被称为"自上而下"或者是"单向"数据流，任何的state总是所属于特定的组件，而从state派生的任何数据只能影响树中低于它们的组件。
这类似与一个瀑布，上层组件在瀑布上层，下层组件在瀑布下层，props是水流，state就是各个组件的水源。
React的数据流动是单向的，也是单层的，即数据不能跨组件流动，但是数据流能够跨组件流动。

事件处理

React事件的命名采用小驼峰而不是纯小写
使用JSX时需要传入一个函数作为事件处理函数而不是一个字符串

//传统
<button onclick="activateLasers()">
  Activate Lasers
</button>
//React
<button onClick={activateLasers}>
  Activate Lasers
</button>

React中不能通过返回false阻止默认的行为，必须显示地使用preventDefault（取消默认行为）

//传统html
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>
//React
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

使用class定义组件，事件处理函数通常为一个方法

处理this

class不会默认绑定this，需要手动进行绑定
可以进行：
• 构造函数中绑定this
this.handle=this.handle.bind(this)
• 在调用时绑定this
onClick={this.handle.bind(this)}
• 在声明时使用箭头函数:class fields语法
handle=()=>{}
• 在回调中使用箭头函数
onClick={() => this.handleClick()}
这个方法的问题是在每次渲染组件的时候都会创建不同的回调函数，作为props传入子组件时，这些子组件可能会进行额外的重新渲染，所以不推荐使用。

向事件处理程序传递参数

有两种方法：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

条件渲染

元素变量

即通过某个state中的状态进行渲染元素的判断，使用这种方法可以增加代码重用。

&&

例子如下：

<div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>

以上例子能够实现是因为：
在JS中，true&&experssion总是返回experssion
false&&experssion总是返回false

三目运算

这里要注意的是，要在可读性和简便性上做好平衡，保持代码的可读性。
如果代码太复杂，应该提取组件。
阻止组件渲染
不希望渲染某组件时，可以直接render null
以下的例子中将不会进行渲染，用这种方法可以在必要的时候阻止特定组件的渲染。

class ClassName extends React.Component{
    render(){
    return null;
  }
}

组件render返回null并不会影响组件的生命周期。

列表&Key

渲染多个组件

在React中渲染多个组件一般使用map方法，从已有数组中产生新数组。
下面的例子进行了解释：

const numbers=[1,2,3,4,5]
const listItems=numbers.map((number)=><li>{number}</li>);
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
); 

基础列表组件

规范化，在一个组件中渲染列表：

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

这个例子的作用与前面的例子相同,只不过为每个