框架和库的概念：
库：小而巧
框架：大而全
什么是模块化和组件化：
模块化：从代码的角度上分析，抽离公共模块封装复用；
组件化：从Ui的角度上考虑分析；
虚拟DOM:
本质:用js对象来模拟dom元素和嵌套关系；
目的：为了实现元素的高效更新；
Diff算法：
tree.diff:新旧两棵DOM树,逐层对比的过程；
component.diff: 每一层中组件级别的对比；
element.diff:如果类型相同进行元素对比的过程；
react用webpack4.0步骤：
1.运行npm init -y快速初始化项目；
2.在项目根目录创建dist和src产品目录；
3.在src下创建index.html main.js
4.安装webpack 命令：cnpm i webpack -D
cnpm i webpack-cli -D
react的三大体系：
react.js :组件编写
reactNative： 移动端开发
reactVr： 虚拟现实技术开发
react开发环境搭建(管理员身份运行)：
npm install -g create-react-app
create-react-app demo1
cd demo1
npm start
项目文件目录：
package.json:第三方包和配置文件；
package-lock.json:锁定安装的版本号（一般不会改）；
node_modules:脚手架下载的第三方包；
public：公用的文件;
public-favicon.ico:图标；
public-index.html:模板文件；
public-manifest.json：移动端的配置；
src:项目开发的主要目录：
src-index.js:项目的入口文件；
react的组件化开发：
// index.js
//react挂载到那个组件中：
ReactDOM.render(<App />, document.getElementById('root'));
jsx的简单用法:
1.通俗的理解遇到"{"就是js,遇到“<”就是html;
2.使用默认方法：
function App() {
return (
<ul className="list">
<li>李慷</li>
</ul>
)
}
3.使用component:
import React,{Component} from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render(){
return (
<ul className="list">
<li>李慷</li>
</ul>
)
}
}
export default App;
</Fragment>组件的用法：
类似一个包装元素，在最外一层：
import React,{Component,Fragment} from 'react';
<Fragment>
</Fragment>
简单的demo(增加菜单选项)：
//1.学习方法，属性，结构的写法：
//2.熟悉绑定事件的方法；
//3.熟悉方法的创建
import React, { Component, Fragment } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props)
this.state = {
inputValue: '',
list: ['js' ,'css']
}
}
render() {
return (
<Fragment>
<div>
<input value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>
<button onClick={this.addLsit.bind(this)}>增加</button>
</div>
<ul className="list">
{
this.state.list.map((item,index)=>{
return(
<li key={index+item}>
<span>{item}</span>
<button onClick={this.deleteItem.bind(this,index)}>删除</button>
</li>
)
})
}
</ul>
</Fragment>
)
}
inputChange(e){
this.setState({
inputValue:e.target.value
})
}
//增加列表：
addLsit(){
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
//删除列表项：
deleteItem(index){
let list = this.state.list
list.splice(index,1)
this.setState({
list:list
})
}
}
export default App;
下载Simple React Snippets 快速书写项目：
imrc
cc
react 的组件拆分和父子组件传值：
//父组件：
import React, { Component, Fragment } from 'react';
import Home from './App.test'
import './App.css';
class App extends Component {
constructor(props) {
super(props)
this.state = {
inputValue: '',
list: ['js' ,'css']
}
}
render() {
return (
<Fragment>
<div>
<label>增加服务</label>
<input value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>
<button onClick={this.addLsit.bind(this)}>增加</button>
</div>
<ul>
{
this.state.list.map((item,index)=>{
return (
<Home
key={index+item}
content={item}
index={index}
deleteItem={this.deleteItem.bind(this)} />
)
})
}
</ul>
</Fragment>
)
}
inputChange(e){
this.setState({
inputValue:e.target.value
})
}
//增加列表：
addLsit(){
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
//删除列表项：
deleteItem(index){
let list = this.state.list
list.splice(index,1)
this.setState({
list:list
})
}
}
export default App;
//子组件：
import React, { Component, Fragment } from 'react';
class Home extends Component {
constructor(props){
super(props)
this.hadleClick = this.hadleClick.bind(this)
}
render() {
return (
<li onClick={this.hadleClick}>{this.props.content}</li>
)
}
hadleClick(){
console.log(this.props.index)
this.props.deleteItem(this.props.index)
}
}
export default Home;
网友评论