React
一. js复习
重新理解javascript(适合快速浏览复习闭包等基础的js知识)。快速复习js特性
二. JSX简介
一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
- 推荐在 JSX 代码的外面扩上一个小括号
- 在 JSX 当中的表达式要包含在大括号里
- JSX属性
- 使用引号来定义以字符串为值的属性：
- 使用大括号来定义以 JavaScript 表达式为值的属性：
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;
- JSX嵌套,JSX 标签是闭合式的，那么你需要在结尾处用 />,可以相互嵌套
- 因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用
camelCase小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。例如，class变成了className，而tabindex则对应着 [tabIndex] - JSX 防注入攻击，可以放心地在 JSX 当中使用用户输入：
React DOM 在渲染之前默认会 过滤 所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。 - JSX 代表 Objects，Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法
- React 元素：它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。
// 注意: 以下示例是简化过的
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
三. 元素渲染
1. react元素
元素是构成 React 应用的最小单位。
元素用来描述你在屏幕上看到的内容，事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
2. 将元素渲染到 DOM 中
- 用React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。
<div id="root"></div>
- ReactDOM.render()， 要将React元素渲染到根DOM节点中，我们通过把它们都传递给此方法来将其渲染到页面上：
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
3. 更新元素渲染
- React 元素都是immutable 不可变的。当元素被创建之后，你是无法改变其内容或属性的。一个元素就好像是动画里的一帧，它代表应用界面在某一时间点的样子
- 在实际生产开发中，大多数React应用只会调用一次 ReactDOM.render(), 有状态组件可以实现 DOM 更新方式
- React 只会更新必要的部分
四. 组件 & Props
1. 函数定义/类定义组件
- 接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
- 也可以使用 ES6 class 来定义一个组件:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
2. 组件渲染
- React元素除了DOM标签，也可以是用户自定义的组件：
const element = <div />;
const element = <Welcome name="Sara" />;
- 组件名称必须以大写字母开头。
- 组件的返回值只能有一个根元素。这也是我们要用一个<div>来包裹所有<Welcome />元素的原因。
3. Props的只读性
- 所有的React组件必须像纯函数那样使用它们的props。
上面的这种函数称为“纯函数”，它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。
function sum(a, b) {
return a + b;
}
五. State & 生命周期
1.将函数转换为类
- 定义为类的组件有一些特性。局部状态就是如此：一个功能只适用于类
- 状态与属性十分相似，但是状态是私有的，完全受控于当前组件。
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
2. 为一个类添加局部状态
- 添加一个类构造函数来初始化状态
this.state, 将 date 从属性移动到状态中
class Clock extends React.Component {
constructor(props) {
super(props); //传递 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')
);
3. 将生命周期方法添加到类中
- 挂载: 每当
Clock组件第一次加载到DOM中的时候，我们都想生成定时器，执行 componentDidMount() 钩子 - 卸载: 每当
Clock生成的这个DOM被移除的时候，我们也会想要清除定时器，在 componentWillUnmount()生命周期钩子中卸载 - 可以在组件类上声明特殊的方法，当组件挂载或卸载时，来运行一些代码，这些方法被称作生命周期钩子。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(), //在 this 中保存定时器ID,如果需要存储不用于视觉输出的东西，则可以手动向类中添加其他字段。
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID); //如果你不在 render() 中使用某些东西，它就不应该在状态中,我们将在 componentWillUnmount()生命周期钩子中卸载计时器：
}
tick() {
this.setState({
date: new Date() //实现了每秒钟执行的 tick() 方法,它将使用 this.setState() 来更新组件局部状态
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
- 快速回顾一下发生了什么以及调用方法的顺序:
-
当 <Clock /> 被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数。 由于 Clock 需要显示当前时间，所以使用包含当前时间的对象来初始化 this.state 。 我们稍后会更新此状态。
-
React 然后调用 Clock 组件的 render() 方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 Clock 的渲染输出。
-
当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子。 在其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 tick()。
-
浏览器每秒钟调用 tick() 方法。 在其中，Clock 组件通过使用包含当前时间的对象调用 setState() 来调度UI更新。 通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么。 这一次，render() 方法中的 this.state.date 将不同，所以渲染输出将包含更新的时间，并相应地更新DOM。
-
一旦Clock组件被从DOM中移除，React会调用componentWillUnmount()这个钩子函数，定时器也就会被清除。
-
4. 正确地使用状态
关于 setState() 这里有三件事情需要知道
- 不要直接更新状态
例如，此代码不会重新渲染组件,应当使用 setState():：
// Wrong
this.state.comment = 'Hello';
// Correct
this.setState({comment: 'Hello'});
- 状态更新可能是异步的
React 可以将多个setState() 调用合并成一个调用来提高性能。
this.props 和 this.state 可能是异步更新的，不应该依靠它们的值来计算下一个状态。
例如，此代码可能无法更新计数器：
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
应使用第二种形式的 setState() 来接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数
// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
// Correct
this.setState(function(prevState, props) {
return {
counter: prevState.counter + props.increment
};
});
- 状态更新合并
调用 setState() 时，React 将你提供的对象合并到当前状态
网友评论