-
React应用场景
React JS → 网页
React Native → 手机APP
React VR → VR全景视图
React Fiber
React 16之后的版本
新特性:优先级、分片
查看全部 -
子组件如果想和父组件通信,要调用父组件传递过来的方法
查看全部 -
父组件通过属性的形式向子组件传递参数
子组件通过props接收父组件传递过来的参数
查看全部 -
React开发环境搭建
--------------------------
【1】安装 nodejs (官网:LTS版本)
【2】安装 create-react-app (官网:docs 右侧)
【3】在目录通过命令创建项目:cra XXXXX
【4】运行项目 npm start
查看全部 -
父组件通过属性的形式向子组件传参
子组件通过props接收父组件传递过来的参数
子组件通过调用父组件传递过来的方法实现与父组件的通信
创建子组件
import {Component} from 'react' class TodoItem extends Component{ constructor(props){ //优化 this.itemDel = this.itemDel.bind(this) } itemDel(){ this.props.itemDel() //const { itemDel } = this.props //itemDel() } render(){ const { content } = this.props //结构赋值 return( <div onClick={this.itemDel}> {content} </div> ) } } export default TodoItem
父组件引入子组件
import {Component,Fragment} from 'react' import TodoItem from './TodoItem'
itemDel(index){ let list=[...this.state.list] list.splice(index,1) this.setState({list}) }
getTodoItems(){ return( this.state.list.map((item,index) => { return ( <TodoItem key={index} content={item} itemDel={this.itemDel.bind(this,index)} /> ) } ) }
render(){ return( <Fragment> <div> <input className='input-style' value={this.state.inputVal} onChange={this.inputChange}/> <button style={{background:'blue',color:'#fff'}} onClick={this.butClick}>add</button> </div> <ul>{this.getTodoItems()}</ul> </Fragment> ) }
查看全部 -
//函数组件写法
const ToDoList=()=> { const [val,setVal] = useState('') const [list,setList] = useState([]) const butClick=()=>{ setList([...list,val]) setVal('') } const inputChange=(e)=>{ setVal(e.target.value) } const itemDel=(e)=>{ let newList=list let i=e.target.dataset.inx newList.splice(i,1) setList([...newList]) } useEffect(()=>{ console.log(list) },[list]) return ( <div className="ToDoList"> <div> <input value={val} onChange={inputChange} /> <button onClick={butClick}>add</button> </div> <ul> { list.map((item,index)=>{ return <li key={index} data-inx={index} onClick={itemDel}>{item}</li> }) //其他传参方式 这两种每次组件渲染时会创建一个新的函数影响性能 //箭头函数 onClick={()=>itemDel(index)} 绑定 onClick={itemDel.bind(this,index)} } </ul> </div> ); }
查看全部 -
React面向数据编程,自动处理DOM
class组件
constructor(props){ //组件创建时自动执行 super(props); //初始化 this.state = { //创建state对象 list:[], inputVal:'' } //优化 this.inputChange = this.inputChange.bind(this) this.butClick = this.butClick.bind(this) }
btnClick() {//增加 this.setState({//改变state数据 list: [...this.state.list,this.state.inputVal], inputVal:'' }) }
inputChange(e) {//输入框内容 this.setState({ inputVal: e.target.value }) }
itemDel(index){//删除 let list=[...this.state.list] list.splice(index,1) this.setState({list}) }
//DOM render(){ return( <div> <div> <input value={this.state.inputVal} onChange={this.inputChange}/> <button onClick={this.butClick}>add</button> </div> <ul> { this.state.list.map((item,index) => { //循环list return <li key={index} onClick={this.itemDel.bind(this,index)}>{item}</li> }) } </ul> </div> ) }
查看全部 -
JSX语法
是一种JavaScript语法扩展,在React中可以方便地用来描述UI
在JSX中插入JavaScript表达式: {JS表达式}
JS表达式就是一个短语,常用的表达式有:
常量
变量名;
函数定义表达式;
属性访问表达式;
函数调用表达式;
算数表达式;
关系表达式;
逻辑表达式;
if语句以及for循环不是JavaScript表达式,不能直接作为表达式写在{}中,但可以先将其赋值给一个变量
查看全部 -
React基于组件开发
用户定义的组件必须以大写字母开头
以小写字母开头的元素代表一个 HTML 内置组件
比如 <div> 或者 <span> 会生成相应的字符串 'div'或者 'span' 传递给 React.createElement(作为参数)。ReactDOM将组件挂载到页面dom节点上,渲染dom
ReactDOM.render(<App />,document.getElementById('root'));
定义React组件
class 组件名 extends Component{ render(){ //必有函数,负责要显示的内容 return( //要显示的内容 ); }}
新版
function App() { return ( ); } export default App;
查看全部 -
React JS 网页应用
React Native 原生应用
React VR VR或全景视图
React Filber是指React16之后的版本对应的React框架,对底层的核心算法进行改良,引入了一些优先级的的概念、分片的概念,使React的代码更加流畅,尤其是处理一些复杂的动画的時候
查看全部 -
React执行的入口文件是src/index.js
registerServiceWorker是一个pwa(离线页面的內容)
App.test.js用于自动化测试
查看全部 -
//开发环境
node
npm
全局切换镜像源:npm config set registry http://registry.npm.taobao.org
查看镜像源使用状态:npm get registry
全局切换官方镜像源:npm config set registry http://www.npmjs.org
//创建新的 React 应用
npx create-react-app appname //新建项目 cd appname npm start //在项目文件夹下启动
*nodejs全局安装包在其他盘Program Files下时文件夹 解析会出现空格导致包不能安装,需要更改全局安装包的安装路径
查看全部 -
<li key={index} onClick = {this.handledel.bind(this,index)}
constructor(props){
super(props)
this.state = {
list:xxxx
}
}
handledel(index){
const list = [...this.state.list]
list.splice(index,1)
this.setState({
list: list
})
}
查看全部 -
js基础:this指向
es6语法:class-constructor 扩展运算符
查看全部 -
组件:网页的一部分
App.js 定义react组件(定义组件的语法看一下)
index.js 项目入口文件 引入组件,通过ReactDOM库把组件渲染到index.html上
import ReactDOM from 'react-dom';
ReactDom库 将组件挂载到页面的一个节点上
比如,将App组件渲染到public/index.html文件(项目的html文件)的root节点里
public/index.html:项目的html文件
查看全部
举报