react
JSX
在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。
例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。
为了便于阅读，我们会将 JSX 拆分为多行，建议将内容包裹在括号中
你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX
你可以通过使用引号，来将属性值指定为字符串字面量：
const element = <div tabIndex="0"></div>;
也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：
const element = <img src={user.avatarUrl}></img>;
在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。
注意：
因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
JSX 防止注入攻击
React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。
JSX 表示对象
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
const element = (
<h1 className="greeting">
Hello, world!
</h1>
)
//两种代码完全等效
const element = React.createElement(
//接受三个参数，标签名，属性参数对象，子元素
'h1',
{className: 'greeting'},
'Hello, world!'
)
这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。
元素渲染
元素是构成 React 应用的最小砖块
与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
仅使用 React 构建的应用通常只有单一的根 DOM 节点
<div id="root"></div>
想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
在实践中，大多数 React 应用只会调用一次 ReactDOM.render()
React 只更新它需要更新的部分.
React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。
考虑 UI 在任意给定时刻的状态，而不是随时间变化的过程，能够消灭一整类的 bug
组件&Props
独立，可复用，单独构思
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
函数组件与class组件
用函数定义组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;}
用ES6语法的class定义组件：
class Welcome extends React.Component{
render(){
return <h1>Hello, {this.props.name}</h1>
}
}
上面两者等效
如何将函数组件转换成class组件：
- 创建一个同名的 ES6 class，并且继承于 React.Component。
- 添加一个空的 render() 方法。
- 将函数体移动到 render() 方法之中。
- 在 render() 方法中使用 this.props 替换 props。
- 删除剩余的空函数声明。
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。
关键词：props
组合组件
组件可以在其输出中引用其他组件。
用同一组件来抽象出任意层次的细节。
通常来说，每个新的 React 应用程序的顶层组件都是 App 组件。
Props的只读性
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
纯函数：不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。
React 非常灵活，但它也有一个严格的规则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
State&生命周期
State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {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')
)
Class 组件应该始终使用 props 参数来调用父类的构造函数。
class 组件声明一些特殊的方法，当组件挂载或卸载时就会去执行这些方法,叫做“生命周期方法”
componentDidMount和componentWillUnmount
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
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,而是使用setState()；
构造函数是唯一可以给 this.state 赋值的地方 - State 的更新可能是异步的
- State 的更新会被合并
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
让setState()接受一个函数而不是一个对象。
// Correct
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
//普通函数写法
this.setState(function(state, props) {
return {
counter: state.counter + props.increment
};
});
数据是向下流动的
组件可以选择把它的 state 作为 props 向下传递到它的子组件中。
任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。
如果你把一个以组件构成的树想象成一个 props 的数据瀑布的话，那么每一个组件的 state 就像是在任意一点上给瀑布增加额外的水源，但是它只能向下流动。
事件处理
- React 事件的命名采用小驼峰式（camelCase），而不是纯小写
- 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串
在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault。
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 为了在回调中使用 `this`，这个绑定是必不可少的 this.handleClick = this.handleClick.bind(this); }
handleClick() { this.setState(state => ({ isToggleOn: !state.isToggleOn
})); }
render() {
return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button>
);
}}
ReactDOM.render(
<Toggle />,
document.getElementById('root'));
你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined.
使用 class fields 正确的绑定回调函数：
class LoggingButton extends React.Component { // 此语法确保 `handleClick` 内的 `this` 已被绑定。 // 注意: 这是 *实验性* 语法。
handleClick = () => { console.log('this is:', this); }
render() {
return (
<button onClick={this.handleClick}> Click me </button>
);
}}
或者在回调中使用箭头函数：
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// 此语法确保 `handleClick` 内的 `this` 已被绑定。
return (
<button onClick={(e) => this.handleClick(e)}> Click me
</button>
);
}}
向事件处理程序传递参数
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。
网友评论