文章目录
- 前言
- 一、创建一个react项目
- 二、搭建React工作环境
- 二、第一个React程序：Hello，React！
- react
- 2.利用react实现一个无序列表（demo）
- 三、React组件
- 1.格式
- 2. 为组件中的HTML元素绑定事件
- 3.如何定义数据区：
- 案例 TodoList
- 1、利用组件化原理编写TodoList功能：
- 2将组件进行拆分：
- 3、代码优化：
前言
react 学习总结
一、创建一个react项目
创建一个react项目，首先先安装好
npm install -g create-react-app /*搭建一个全局的脚手架*/
create-react-app my-demo /*创建项目 my-demo是项目名字*/
cd my-demo /*进入目录 然后启动*/
npm start
- 1
- 2
- 3
- 4
二、搭建React工作环境
- React的核心库：
- React进行Dom操作的库：
- 将JSX语言转换为JavaScript语言：
== 如果我们将所有的React代码都书写在HTML文档中，则页面的启动不需要服务器。
如果我们将所有的React代码都书写在独立的js文件中，则页面的启动需要服务器。==
平时自己练习demo可以这样写：
<script type="text/javascript" src="js/"></script>
<script type="text/javascript" src="js/"></script>
<script type="text/javascript" src="js/"></script>
<script type="text/babel" src="js/"></script>
- 1
- 2
- 3
- 4
二、第一个React程序：Hello，React！
react
1. React的核心方法：
(JSX代码,DOM Node)
功能：将JSX代码生成的HTML节点放入指定的DOM节点中。
- 1
- 2
(
<h1>Hello,React!</h1>,
(“app”)
)
- 1
- 2
- 3
- 4
2. JSX代码必须具备一个根据节点。
3. JSX是HTML和JavaScript语言的混合
（1）HTML代码必须用 < > 扩住。
（2）JavaScript代码必须用 { } 扩住。
在HTML代码中嵌入的JavaScript代码必须是一个数组。
2.利用react实现一个无序列表（demo）
例：做一个数组，在页面中利用React技术将数组元素渲染为一个无序列表
let list=[‘张三’,‘李四’,……];
ReactDOM.render(
<div>
<ul>
{
list.map(item=>{
return <li>{item}</li>
})
}
</ul>
</div>,
document.getElementById(“app”)
)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
三、React组件
React组件名必须用大写字母开头。
1.格式
class 组件名 extends {
constructor(props){
super(props);
}
render(){
return (
JSX代码
)
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
2. 为组件中的HTML元素绑定事件
h1Click(){…}
render(){
return (<h1 onClick={this.h1Click}></h1>)
}
- 1
- 2
- 3
- 4
事件绑定的四种方式：
export default class Test extends React.Component{
constructor(props){
super(props); //获取组件的参数可以使用就可以
this.state = { //状态定义
name:'test'
}
事件绑定的四种方式：
this.clickbtn1 = this.clickbtn1.bind(this)//在构造函数中使用bing绑定this
}
clickbBtn1(){
//事件处理事情
}
clickBtn2(){//在调用的时候使用bind绑定this
//事件处理事情
}
clickBtn3(){//调用的时候使用箭头函数绑定this onClick={()=>this.clickBtn3()s}
//事件处理
}
clickBtn4 = ()=>{//官方绑定事件的四种方法个人比较喜欢第四种是目前的实验性的方法
//事件处理
}
//四种方式的对比：
方式2和3在
优点：就是在不需要在定义的constructor里面去定义this.clickBtn2 = this.clickBtn2.bind(this),无状态组件使用比较方便也就是函数式组件
缺点：每一次调用生成新的实力影响性能，在传入地阶组件的时候组件进行从新的渲染，造成成性能的不必要浪费
方式1：
优点：在调用的时候不在需要this绑定，只会生成一个实力，在不会多余的生成
缺点：在不使用state的时候也得需要一个构造函数去绑定this代码较多一些！在使用函数式组价不太方便
方式4：
优点：利用属性初始化语法，将方法初始化为箭头函数，因此在初始化的时候就绑定this，结合了方法1,2,3的方法
缺点：需使用bable转译，目前认识实验性语法
总结：
方式1是官方推荐的绑定方式，也是性能最好的方式。
方式2和方式3会有性能影响并且当方法作为属性传递给子组件的时候会引起重渲问题。
方式4目前属于实验性语法，但是是最好的绑定方式，需要结合bable转译
reader(){
return(
<div>
<button onClick={this.clickBtn1}>btn1<button>
<button onClick={this.clickBtn2.bind(this)}>btn2<button>
<button onClick={()=>this.clickBtn3()}>btn3<button>
<button onClick={this.clickBtn4}>btn4<button>
<div>
)
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
3.如何定义数据区：
（1）数据区定义在组件的构造函数中，以类的属性来进行定义。
constructor(props){
super(props);
={
//数据区
}
}
- 1
- 2
- 3
- 4
- 5
- 6
（2）在JSX代码中如何调用数据区中的数据：{.变量名}
（3）在方法中如何使用 指向组件的this：
<button onClick={(this)}>单击</button>
- 1
（4）如何修改数据区中的数据：
({
a:200
})
- 1
- 2
- 3
（5）在组件的使用过程中，可以通过类似于HTML属性的格式向组件定义部分传递参数。
<Book title=“你好” ok=“Hello”></Book>
引用属性：
- 1
- 2
代码示例
class Book extends React.Component{
constructor(props){
super(props); //调用父组件传递属性，参照ES6 class 关键字
this.state={ //state是类Book的属性，state是组件Book的数据区
a:100,
list:['第一','第二']
};
}
//h1的单击事件
h1Click(){
window.alert(this.props.ok);
}
//按钮的单击事件
btnClick(){
console.log(this);
this.setState({
a:this.props.title
})
}
render(){
return (
<div>
<h1 onClick={this.h1Click.bind(this)}>
欢迎学习React组件{this.state.a}
</h1>
<hr></hr>
<button onClick={this.btnClick.bind(this)}>单击</button>
//参照函数的apply()或call()方法
</div>
)
}
}
ReactDOM.render(
<div>
<Book title="你好" ok="Hello"></Book>
</div>,
document.getElementById('app')
);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
案例 TodoList
1、利用组件化原理编写TodoList功能：
（1）利用map()方法对数组进行映射时，需要对重复显示的内容添加key属性，取值为具有唯一性的索引值。
（2）对文本框中的数据进行双向绑定：
JSX：
<input value={} onChange={(this)} />
inputChange(event){
(); //得到用户在文本框中输入的内容
({
inputValue:
})
}
（3）在JSX中为HTML元素设置类名，应该使用className属性，而不是class属性。
（4）如何在JSX代码中指定的事件里传递参数：
<span className=“delete” onClick={(this,index)}></span>
如何使用了Bootstrap，则不要使用.close类名。
（5）利用Bootstrap进行页面样式的改写：
.container
.row
.col-md-12
文本框与按钮：
.input-group
-control //文本框
.input-group-btn
-primary //按钮
（6）如何为HTML元素设置内联样式：
<li style={{marginBottom:’10px’}}><span>×</span>{item}</li>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
2将组件进行拆分：
（1）父组件向子组件传递数据：通过HTML属性来进行传递的。
子组件接收父组件传递的参数：.属性名
（2）子组件向父组件传递数据：通过父组件中的自定义事件来进行传递。
子组件中如何调用父组件的自定义事件：.自定义事件名
- 1
- 2
- 3
- 4
3、代码优化：
（1）事件中的this指向：
A .我们在开发时希望this永远指向this所在的组件（类中）中
B .第一种解决方案：
在组件的构造函数中，对所有的事件方法进行重写，这样在使用这些事件方法时就不需要再重新指定this指向了。
constructor(props){
super(props);
={}; //组件的状态，相当于Vue中的数据区
//对组件中使用的事件进行重写
=(this);
=(this);
=(this);
}
render(){
return(
<input type=“text” onChange={} />
)
}
C .第二种解决方案：
使用箭头函数来书写事件代码。
<input onChange={()=>(event)}>
<button onClick={()=>()}></button>
<TodoItem onCustom={()=>(index)} />
D .如果要在浏览器的控制台中看到组件实例，可以定义一个全局变量，在组件的构造函数中将this指向这个全局变量。
let that;
class TodoList extends {
constructor(props){
that=this;
}
}
（2）如何在JSX代码中设置必须存在的根节点。
问题：如果用普通的div或HTML标记对做根节点，这个跟节点将被渲染到页面中。
解决：使用<></>做根节点。
（3）使用对象解构的方式对React对象的属性进行操作：
const {Component,Fragment} = React;
class TodoList extends Component{
render(){
return (
<Fragment></Fragment>
)
}
}
（4）子组件接收父组件传递的参数也可以使用对象解构的方式。
const {text,index,onCustom} = ;
具体的子组件方法中使用到哪个父组件属性就解构哪一个。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45