2019年12月24日16:47:12
2019年10月25日11:24:29
主要介绍react入门知识。
1.jsx语法介绍
1.1 介绍
jsx语法是一种类似于html标签的语法,它的作用相当于是让我们在JavaScript代码中直接写html代码,但是jsx不完全是html,它是 JavaScrip 的一种扩展语法,它具有 JavaScript 的全部能力,我们还可在jsx代码中插入变量或者表达式,用jsx语法写出来的语句是一个对象,我们可以将它存为一个变量,这个变量作为ReactDOM对象的render方法的第一个参数。
const element = <h1>Hello, world!</h1>;
1.2 基础使用
我们可以在以上代码中嵌套多个 HTML 标签,需要使用一个 div 元素包裹它,实例中的 p 元素添加了自定义属性 data-myattribute,添加自定义属性需要使用 data- 前缀。
ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);
1.3 jacvascript表达式——{}
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下:
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
1.4 conditional (三元运算)
在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值,则会输出 false.
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
1.5 内联样式
React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式:
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>菜鸟教程</h1>,
document.getElementById('example')
);
1.6 注释
注释需要写在花括号中,实例如下:
{/*注释...*/}
1.7 数组
JSX 允许在模板中插入数组,数组会自动展开所有成员:
var arr = [
<h1>菜鸟教程</h1>,
<h2>学的不仅是技术,更是梦想!</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
2.react介绍
2.1 介绍
React.js是前端三大新框架:Angular.js、React.js、Vue.js之一,这三大新框架的很多理念是相同的,但是也有各自的特点。
React起源于Facebook的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
React可以作为一个js库来使用,我们在页面上引用相关的js文件,就可以使用它来做一些页面效果。
React也可以将界面拆分成一个个的组件,通过组件来构建界面,然后用自动化工具来生成单页面(SPA - single page application)应用系统。
2.2 React 特点
- 1.声明式设计 −React采用声明范式,可以轻松描述应用。
- 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
- 3.灵活 −React可以与已知的库或框架很好地配合。
- 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
- 5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
- 6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
官方文档:https://www.reactjscn.com/docs/hello-world.html
2.3 例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<style>
.foo{
color:blue;
}
</style>
</head>
<body>
<div id="root1"></div>
<script type="text/babel">
const element = <h1 className="foo">Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root1'));
</script>
</body>
</html>
<script type="text/babel">
let iNum01 = 10;
let sTr = 'abc123456';
function fnRev(s){
return s.split('').reverse().join('');
}
let el = (
<div>
<h3>jsx语法</h3>
{/* 插入变量及运算 */}
<p>{ iNum01+5 }</p>
{/* 插入表达式 */}
<p>{ sTr.split('').reverse().join('') }</p>
{/* 插入函数调用 */}
<p>{ fnRev(sTr) }</p>
{/* 插入三元运算表达式 */}
<p>{ ok?'YES':'NO' }</p>
</div>
);
ReactDOM.render(
el,
document.getElementById('root')
)
</script>
2.4 必须引入脚本
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js">
</script>
//Babel来进行转换
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js">
</script>
注意:
由于 JSX 就是 JavaScript,一些标识符像
class
和for
不建议作为 XML 属性名。作为替代,React DOM 使用className
和htmlFor
来做对应的属性。
2.5 独立文件——阅读清晰
React JSX 代码可以放在一个独立文件上,例如我们创建一个 helloworld_react.js
文件,代码如下:
//helloworld_react.js
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
然后在 HTML 文件中引入该 JS 文件:
//index.html
<body>
<div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>
3.组件和属性
组件可以理解成是一个组成页面的部件或者零件,每个部件都有自己完整的结构和功能,多个部件拼装在一起就可以组成一个页面,从组件的实现来看,组件最终是要返回一个jsx对象,不过它和jsx对象的区别是,它在jsx对象的基础上,还带有自己的方法和属性,能完成它自己的交互功能。
组件有两种定义方式:一种是函数式定义,一种是类定义。
3.1 函数式定义组件
通过函数来定义一个组件,组件名称首字母要大写,函数接收一个参数props,返回一个jsx对象。其中,name属性是在渲染组件时,通过定义属性传入进来的。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
注意,在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
3.2 类方式定义组件
上面的组件可以通过下面ES6的类的方式定义,定义的类都要继承于React对象中的Component类,这个定义的组件和上面的功能是等效的。
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
3.3 组件渲染
组件渲染和jsx对象一样,我们可以通过ReactDOM.render()方法来渲染组件。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
3.4 组件组合
可以在一个组件内,拼装其他的组件,从而组合成一个更大的组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
4.状态(state)
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
以下实例创建一个名称扩展为 React.Component 的 ES6 类,在 render() 方法中使用 this.state 来修改当前的时间。
添加一个类构造函数来初始化状态 this.state,类组件应始终使用 props 调用基础构造函数。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
4.1 生命周期方法
生命周期方法,指的是在组件初始化后,以及组件销毁时,会自动执行的两个方法,我们可以在初始化方法中执行获取数据的操作,在组件销毁方法中执行一些清除操作,比如清除定时器等操作。
这两个方法分别是:componentDidMount 和 componentWillUnmount。
class Hello extends React.Component{
constructor(props){
super(props);
this.state = {}
}
// 组件初始化时自动执行的方法
componentDidMount() {
console.log('componentDidMount');
}
// 组件销毁时自动执行的方法
componentWillUnmount(){
console.log('componentWillUnmount');
}
render(){
return (
<h1>Hello world!</h1>
);
}
}
ReactDOM.render(<Hello />,document.getElementById('root'));
setTimeout(() => {
ReactDOM.render(<h1>切换组件</h1>,document.getElementById('root'));
}, 2000);
4.2 将生命周期方法添加到类中
在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要。
每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载。
同样,每当 Clock 生成的这个 DOM 被移除的时候,我们也会想要清除定时器,这在 React 中被称为卸载。
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>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
实例解析:
在组件输出到 DOM 后会执行 componentDidMount() 钩子,我们就可以在这个钩子上设置一个定时器。
this.timerID 为定时器的 ID,我们可以在 componentWillUnmount() 钩子中卸载定时器。
代码执行顺序:
- 当被传递给
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.3 ES6函数
()=>this.tick() 是 ES6 中声明函数的一种方式,叫做箭头函数表达式,引入箭头函数有两个方面的作用:更简短的函数并且不绑定 this。
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
var f = ([参数]) => 表达式(单一)
// 等价于以下写法
var f = function([参数]){
return 表达式;
}
箭头函数的基本语法如下:
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式(单一)
//相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }
// 当只有一个参数时,圆括号是可选的:
(单一参数) => {函数声明}
单一参数 => {函数声明}
// 没有参数的函数应该写成一对圆括号。
() => {函数声明}
5.绑定事件
5.1 介绍
React绑定事件和JavaScript中的行间事件类似,事件绑定是写在标签中的,但是,React事件是在原生事件的基础上做了封装,它的事件使用驼峰命名,而不是全部小写。事件需要传递一个函数作为事件处理程序,这个函数在哪里定义呢?我们可以通过类定义组件,将这个函数作为一个方法定义在组件中。
5.2 设计onclick()
定义一个点击能弹出名称的组件:
class Helloname extends React.Component {
fnHello(){
alert('Hello,Tom');
}
render(){
return (
<input type="button" value="打招呼" onClick={this.fnHello} />
)
}
}
ReactDOM.render(<Helloname />, document.getElementById('root'));
5.3 传递参数
如果想把这个组件定义成可以传递名称参数的,可以定义如下:
class Helloname extends React.Component {
fnHello(){
alert(this.props.name);
}
render(){
return (
<input type="button" value="打招呼" onClick={this.fnHello.bind(this)} />
)
}
}
ReactDOM.render(<Helloname name="Tom" />, document.getElementById('root'));
需要注意的是,按钮在调用方法时,此时的this默认会指向这个按钮,所以在绑定事件时,需要绑定this,将this指向当前对象。
6.列表渲染
6.1 列表渲染
如何拼装数组中的数据放入页面呢?可以将数组中的数据通过数组遍历渲染成一个jsx对象,在通过React渲染这个对象就可以了。
使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
<li>{numbers}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('example')
);
我们可以将以上实例重构成一个组件,组件接收数组参数,每个列表元素分配一个 key,不然会出现警告 a key should be provided for list items,意思就是需要包含 key:
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);
6.2 keys
Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常,我们使用来自数据的 id 作为元素的 key:
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
当元素没有确定的 id 时,你可以使用他的序列号索引 index 作为 key:
const todoItems = todos.map((todo, index) =>
// 只有在没有确定的 id 时使用
<li key={index}>
{todo.text}
</li>
);
let aList = ['红海','复联3','碟中谍6','熊出没'];
let el = aList.map((item,i)=>
<li key={i}>{ item }</li>
);
ReactDOM.render(
<ul>{el}</ul>,
document.getElementById('root')
);
通过map方法遍历数组中的成员,map方法的第二个参数是数组中的索引值,在循环生成li结构时,需要给每个li加上一个key,这个key的值可以用数组中的成员索引值。
7.表单数据绑定
7.1 表单数据绑定
表单元件对应着数据,而且这些数据都是变化的,所以我们会将表单元件的数据对应于组件中的state属性值,让它们之间的值实现双向数据绑定的效果,要实现这个效果,需要在表单元件上绑定onchange事件,来将state中的值改变为表单元件中的值,同时也需要将表单的value属性值,设置为等于state中的属性值。
表单数据绑定示例:
class Myform extends React.Component {
constructor(props){
super(props);
this.state = {
uname:''
};
}
// ev指的是系统自动产生的事件对象
// ev.target指的是发生事件的元素
fnNameInput(ev){
this.setState({
uname:ev.target.value
})
}
render(){
return(
<form>
<p>用户的名称是:{ this.state.uname }</p>
<input type="text" value={this.state.uname} onChange={this.fnNameInput.bind(this)} />
</form>
);
}
}
ReactDOM.render(
<Myform />,
document.getElementById('root')
);
8. refs
8.1 介绍
React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。
这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。
8.2 使用方法
绑定一个 ref 属性到 render 的返回值上:
<input ref="myInput" />
在其它代码中,通过 this.refs 获取支撑实例:
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
你可以通过使用 this 来获取当前 React 组件,或使用 ref 来获取组件的引用,实例如下:
class MyComponent extends React.Component {
handleClick() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
}
render() {
// 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
2019年10月25日14:22:14