1. reactjs是什么?
1). facebook开源的一个js库
2). 一个用于动态构建用户界面的js库
2. react的特点
* declarative(声明式编码)
* component-based(组件化编码)
* learn once, write anywhere(支持客户端与服务器渲染)
* 高效
* 单向数据流
3. react高效的原因
1). 虚拟(virtual)dom, 不总是直接操作dom
2). 高效的dom diff算法, 最小化页面重绘
4. 模块与组件的概念
* 模块: 向外提供特定功能的js程序, 一般就是一个js文件
作用: 简化js的编写, 阅读, 提高运行效率
* 组件: 用来实现特定功能效果的代码集合(html/css/js)
作用: 复用, 简化项目编码, 提高运行效率
5. 模块化与组件化
* 模块化:
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
* 组件化:
当应用是以多组件的方式实现功能, 这个应用就是一个组件化的应用
6.入门案例
react.js: react的核心库
react-dom.js: 提供操作dom的扩展库
babel.min.js: 解析jsx语法代码转为纯js语法代码的库
在页面中导入js
编码
<script type="text/babel"> //必须用babel
我要评论 1 <div id="demo"></div>
2
3 <script type="text/javascript" src="../js/react.js"></script>
4 <script type="text/javascript" src="../js/react-dom.js"></script>
5 <script type="text/javascript" src="../js/babel.min.js"></script>
6 <script type="text/babel">
7 //页面中的真实容器元素
8 var containdiv = document.getelementbyid('demo');
9 //react的虚拟dom对象
10 var vdom = <div id="demo">hello, react!</div>; //不是字符串, 不能加引号
11 //将虚拟dom对象渲染到页面元素中
12 reactdom.render(vdom, containdiv);
13 //页面结果: <div id="demo"><div id="demo">hello, react!</div></div>
14 </script>
7.jsx语法
jsx 即javascript xml，它是一种在react 组件内部构建标签的类xml语法，使用jsx可以提高组件的可读性，因此推荐使用。jsx最终会被转换为javascript。
1⃣️react组件只能渲染一个根节点，这是由于js的特性，即return语句只能返回单个的值，解决办法是将要返回的值都包含在一个根对象中。
2⃣️jsx不能使用if语句，可使用三元表达式替代，或者将条件语句移动到jsx外部。
<script type="text/babel">
//初始化动态数据
var title = 'i love you!';
var myname = 'bww';
//创建虚拟dom : jsx
var vdom = <h1 id="mytitle" name={myname}>{title}</h1>;
//将虚拟dom渲染中页面元素中
reactdom.render(vdom, document.getelementbyid('example1'));
</script>
8. 自定义组件(component) :
1). 定义组件
//方式1: 工厂(无状态)函数(最简洁, 推荐使用)
function mycomponent1() {
return <h1>自定义组件标题11111</h1>
}
//方式2: es6类语法(复杂组件, 推荐使用)
class mycomponent3 extends react.component {
render () {
return <h1>自定义组件标题33333</h1>
}
}
//方式3: es5老语法(不推荐使用了)
var mycomponent2 = react.createclass({
render () {
return <h1>自定义组件标题22222</h1>
}
})
2). 渲染组件标签
reactdom.render(<mycomponent/>, document.getelementbyid('example'));
注意:
1). 返回的组件类必须首字母大写
2). 虚拟dom元素必须只有一个根元素
3). 虚拟dom元素必须有结束标签
reactdom.render()渲染组件标签的基本流程
1). react内部会创建组件实例对象
2). 得到包含的虚拟dom并解析为真实dom
3). 插入到指定的页面元素内部
9.组件实例对象3大属性之一: props属性
1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中
3. 内部读取某个属性值: this.props.propertyname
4. 作用: 通过标签属性从组件外向组件内传递数据(只读)
5. 对props中的属性值进行类型限制和必要性限制
person.proptypes = {
name: react.proptypes.string.isrequired,
age: react.proptypes.number.isrequired
}
6. 扩展属性: 将对象的所有属性通过props传递
<person {...person}/>
7. 默认属性值
person.defaultprops = {
name: 'mary'
};
8. 组件类的构造函数
constructor (props) {
super(props);
console.log(props); // 查看所有属性
}
//缺失时设置默认属性
person.defaultprops = {
sex: '男',
age: 18
};
//初始化数据
let person = {name: 'atguigu', sex: '女', age: 3};
//根据数据动态渲染组件标签
/*reactdom.render(<person name={person.name} age=
{person.age} sex={person.sex}/>,
document.getelementbyid('example'));*/
reactdom.render(<person {...person}/>,
document.getelementbyid('example'));
const person2 = {name: 'kobe', sex: '女'};
reactdom.render(<person {...person2}/>,
document.getelementbyid('example2'));
1 <script type="text/babel">
2 //定义内部标题组件
3 class welcome extends react.component {
4 render() {
5 return <h2>welcome {this.props.name}!</h2>;
6 }
7 }
8 welcome.proptypes = {
9 name: react.proptypes.string.isrequired
10 };
11 //定义外部应用组件
12 class app extends react.component {
13 render() {
14 return (
15 <div>
16 {
17 this.props.names.map(
18 (name, index) => <welcome name={name} key={index}/>
19 )
20 }
21 </div>
22 );
23 }
24 }
25 app.proptypes = {
26 names: react.proptypes.array.isrequired
27 };
28
29 /**********************************************************/
30
31 var names = ['tom', 'jack', "bob"];
32 reactdom.render(<app names={names}/>, document.getelementbyid('example'));
33 </script>
10. 组件实例对象的3大属性之二: refs属性
1). 组件内的标签都可以定义ref属性来标识自己
2). 在组件中可以通过this.refs.refname来得到对应的真实dom对象
3). 作用: 用于操作指定的ref属性的dom元素对象(表单标签居多)
* <input ref='username' />
* this.refs.username //返回input对象
事件处理
1). 通过onxxx属性指定组件的事件处理函数(注意大小写)
* react使用的是自定义(合成)事件, 而不是使用的dom事件
* react中的事件是通过委托方式处理的(委托给组件最外层的元素)
2). 通过event.target得到发生事件的dom元素对象
<input onfocus={this.handleclick}/>
handlefocus(event) {
event.target //返回input对象
}
强烈注意
1). 组件内置的方法中的this为组件对象
2). 在组件中自定义的方法中的this为null
* 强制绑定this
* 箭头函数(es6模块化编码时才能使用)
1 class refstest extends react.component {
2 constructor (props) {
3 super(props);
4
5 this.showmsg = this.showmsg.bind(this); // 强制给showmsg()绑定this(组件对象)
6 this.handleblur = this.handleblur.bind(this);
7 }
8
9 showmsg() {
10 // console.log(this); //this默认是null, 而不组件对象
11 const input = this.refs.msg;
12 alert(input.value);
13 }
14
15 handleblur(event) {
16 const input = event.target;
17 alert(input.value);
18 }
19
20 render () {
21 return (
22 <div>
23 <input type="text" ref="msg"/>
24 <button onclick={this.showmsg}>提示输入数据</button>
25 <input type="text" placeholder="失去焦点提示数据" onblur={this.handleblur}/>
26 </div>
27 );
28 }
29 }
11.组件实例对象3大属性之: state属性
1). 组件被称为"状态机", 通过更新组件的状态值来更新对应的页面显示(重新渲染)
2). 初始化状态:
constructor (props) {
super(props)
this.state = {
stateprop1 : value1,
stateprop2 : value2
}
}
3). 读取某个状态值
this.state.statepropertyname
4). 更新状态---->组件界面更新
this.setstate({
stateprop1 : value1,
stateprop2 : value2
})
12.受控组件
class twoway extends react.component {
constructor(props) {
super(props)
this.state = {
msg: 'atguigu'
}
this.handlechange = this.handlechange.bind(this)
}
handlechange(event) {
let msg = event.target.value
this.setstate({msg})
}
render() {
return (
<div>
<input type="text" value={this.state.msg} onchange={this.handlechange}/>
<p>{this.state.msg}</p>
</div>
)
}
}
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论