React入门学习笔记
React学习笔记
安装
1、通过js文件引入React的js文件
2、npm部署React环境
详情请参考官方文档
组件
Props数据传递
数据可以通过Props在两个组件间传递（父组件流向子组件）
class Square extends React.Component {
render() {
return (
<button className="square">
{this.props.value}
</button>
);
}
}
class Board extends React.Component {
renderSquare(i) {
return <Square value={i} />; // 这里就会把i传递给Square
}
...
}初始化
class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
}
}
render() {
return (
<button className="square"
onClick={()=>this.setState({value:'X'}) }>
{this.state.value}
</button>
);
}
}这里的constructor()初始化了props，state.value=null；当点击后，state.value=X;
每当state发生变化，就会重新渲染子组件。
简单的JSX
const element = <h1>Hello,React!</h1> ;JSX是Javascript的语法扩展，在React配合使用JSX可以很好的描述UI。JSX具备JavaScript的全部功能。
JSX可以生成React元素，将这些元素渲染为DOM。
JSX语法中，可以在大括号内放置任何有效的JS表达式；
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const element = <h1>Hello,React!</h1>;
ReactDOM.render(element, document.getElementById('root'));React元素是不可变对象，创建后无法改变Ta的子元素/属性；想要改变元素只有重新渲染创建一个权限的元素并传入ReactDOM.render()。
ReactDOM会将元素和子元素与ta们的状态进行比较，并只会进行必要的更新来使DOM达到预期。
组件
组件类似于一个类对象，将可独立且复用的代码片段进行独立构造成一个组件，调用该组件即可实现代码复用。
函数组件与class组件
- 函数组件
function Welcome(props) {
return ....
}welocme()函数是一个React函数组件，接收带有数据的props对象并返回一个React元素。
- class组件
class Welcome extends React.Component {
render() {
return ...
}
}渲染组件
React元素支持用户自定义的组件：
const element = <Welcome name="demo" />React元素为自定义组件，JSX所接收的属性、子组件转换为单个对象props传递给组件。
class Welcome extends React.Component {
render() {
return <p>{props.name} -- {props.value}</p>;
}
}
const element = <Welcome name="demo" value="demo.." />React会将以小写字母开头的组件视为原生DOM标签
渲染输出显示，组件可以引用其它组件。
class Welcome extends React.Component {
render() {
return <p>{props.name} -- {props.value}</p>;
}
}
class App() extends React.Component {
render() (
<div>
<Welcome name="one" value="1"/>
<Welcome name="two" value="2"/>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));提取组件
如果我们写了一个非常非常重的组件，则可以依照层次结构提取组件变为多个小组件。
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="comment-date">
{formatDate(props.date)}
</div>
</div>
);
}经过组件提取后如下
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
)
}
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
)
}
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="comment-date">
{formatDate(props.date)}
</div>
</div>
);
}组件无论如何都不能修改自身的props；React灵活允许接收自定义的传参，但绝不允许props被更改。
state与生命周期
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component {
// class构造函数。为this.state赋值
constructor(props) {
super(props);
this.state = {
date : new Date()
};
}
// 组件被渲染到DOM后运行（挂载执行）
componentDidMount() {
// 设置计时器
this.timerID = setInterval(
() => this.tick(),
1000
);
}
// 组件从DOM移除后运行（卸载执行）
componentWillUnmount() {
// 清楚计时器
clearInterval(this.timerID);
}
tick() {
// 修改state
this.setState({
date : new Date()
});
}
render() {
return (
<div>
<h1></h1>
<p>It is {this.state.date.toLocaleTimeString()}</p>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);- 正确使用State
1、不能直接修改State，需要调用this.setState()方法来修改。
2、State属于异步更新、合并更新，因为是调用同一个方法来更新数据，所以会存在合并异步更新的情况。
3、数据是向下流动的，子无法直接向父传递数据；每一个组件的state是局部封装，如果需要可以作为props向下传递到子组件。
事件处理
1、React的事件命名采用小驼峰式
2、使用JSX语法时，需要传入一个函数作为事件处理函数而不是字符串
3、阻止事件不可返回false方式，必须显式的使用preventDefault
条件渲染
React使用JS的运算符去创建元素来表示状态。
可以使用变量来存储元素，有条件的渲染组件的一部分内容。
列表和key
我们可以使用map去遍历一个数组然后返回一个带有li标签的“列表”数组，我们则可以成功的渲染一个列表；但是由于React的约束要求，我们的列表元素中必须包括一个特殊的key属性。
key帮助React识别元素的改变（增/删/改），故此需要给数组中的没一个li元素一个确定的同层唯一标识。
受控组件
在HTML表单元素中，表单元素会自己维护自己的状态而在React中可变状态通常是有state属性控制的，并且只可以使用setState()更新属性；为了适应React的state成为“唯一数据源”，渲染表单的组件还控制着输入过程中表单发生的操作，被React以这种方式控制取制的表单输入元素称之为“受控组件”。
React文档中也指出React对表单的受控组件处理比较烦杂，而且存在非受控组件；官方给出了推荐[Formik]