React学习
1.预习
先提前了解与熟悉常用的元素。
- JSX是React的核心内容。是JavaScript XML简写。优势是声明式的语法，更加直观，与HTML结构相同，降低学习成本，提高开发效率。
- 元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。其中react 的核心就是渲染元素。渲染元素常用render。
- 组件一个组件接收一些参数，我们把这些参数叫做 props（“props” 是 “properties” 简写），然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。
- State React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面。 - props 参数 state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
- 箭头函数
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}
// 没有参数的函数应该写成一对圆括号。
() => {函数声明}
2.JSX 的使用
JSX语法：
- React元素的属性使用驼峰命名法
- 特殊属性名： class -> className; for -> htmlFor; tabindex -> tabIndex
- JSX中使用变量，用大括号包裹
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
const isLoading = false
const loadData = () => {
if (isLoading) {
return (<div>loading...</div>)
}
return (<div>数据加载完成，此处显示加载后的数据</div>)
}
const songs = [
{ id: 1, name: '001'},
{ id: 2, name: '002'},
{ id: 3, name: '003'},
]
const list = (
<ul>
{songs.map(item => {
return (
<li key={item.id}>{item.name}</li>
)
})}
</ul>
)
ReactDOM.render(list, document.getElementById('root'))
- 元素渲染 想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
3.组件的使用
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
React 组件创建方式方式有两种，使用函数创建，和使用类创建。
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
Class 组件应该始终使用 props 参数来调用父类的构造函数。
constructor(props) {
super(props);
this.state = {date: new Date()};
}
创建简单的函数组件
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 组件
通过以下五步将 Clock 的函数组件转成 class 组件：
- 创建一个同名的 ES6 class，并且继承于 React.Component。
- 添加一个空的 render() 方法。
- 将函数体移动到 render() 方法之中。
- 在 render() 方法中使用 this.props 替换 props。
- 删除剩余的空函数声明。
4.state
允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容。并且是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')
);
关于 setState() 你应该了解三件事：
- 不要直接修改 State，构造函数是唯一可以给 this.state 赋值的地方,不要直接对state进行赋值。
- State 的更新可能是异步的
- State 的更新会被合并。
componentDidMount() {
fetchPosts().then(response => {
this.setState({
posts: response.posts
});
});
fetchComments().then(response => {
this.setState({
comments: response.comments
});
});
}
生命周期函数
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
}
componentWillUnmount() {
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。
在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。
this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。
|