-
REACT中不再是操作DOM,而是面向數據編程。
construct是構造函式 (ES6),在組件創建的一瞬間會執行
state是數據存放的位置,比如這裡的 list查看全部 -
原因事件是小寫的c,而 react的事件是大寫的C,onClick。
JSX裡面寫要寫個JSX表達式的話,一定要用 {} 包裹起來查看全部 -
報錯原因
render()函數 return出去的內容,只能是一個大的JSX。
所以這兩個小的JSX區塊一定要包裹在一個大的JSX裡面。查看全部 -
import React from 'react'; import ToDoIterm from './ToDoIterm'; //React避免 Dom 操作,主要是面向数据操作; class ToDoList extends React.Component{ //state存放数据的地方; constructor(props){ super(props); this.state = { list:[], inputValue:'' } } //修改state用setState; handleBtnClick(){ this.setState({ list:[ ...this.state.list,//...:数组展开符; this.state.inputValue ], inputValue:''//为了让点击后input值清空; }); } //监听input值变化; handleBtnChange(e){ this.setState( { inputValue:e.target.value //获取变化值; } ); } //删除点击的列表项; handleItemDelet(index){ //这一步相当于复制list(即副本);在React中对state数据进项操作时,建议对副本操作,提高代码可调实性; const list = [...this.state.list]; list.splice(index,1); this.setState({ list //list : list的简化,在es6中当key=value时可简化; }) } render(){ return ( <div> <div> <input value={this.state.inputValue} onChange={this.handleBtnChange.bind(this)}></input> <button onClick={this.handleBtnClick.bind(this)}>add</button> </div> <ul> {this.state.list.map((iterm,index)=>{ //循环list; return <ToDoIterm key={index} content={iterm}/>;//父组件以参数的形式向子组件传递参数; //return <li key={index} onClick={this.handleItemDelet.bind(this,index)}>{item}</li> })} </ul> </div> ); } } export default ToDoList;
查看全部 -
import React from 'react'; //React避免 Dom 操作,主要是面向数据操作; class ToDoList extends React.Component{ //state存放数据的地方; constructor(props){ super(props); this.state = { list:[], inputValue:'' } } //修改state用setState; handleBtnClick(){ this.setState({ list:[ ...this.state.list,//...:数组展开符; this.state.inputValue ], inputValue:''//为了让点击后input值清空; }); } //监听input值变化; handleBtnChange(e){ this.setState( { inputValue:e.target.value //获取变化值; } ); } //删除点击的列表项; handleItemDelet(index){ //这一步相当于复制list(即副本);在React中对state数据进项操作时,建议对副本操作,提高代码可调实性; const list = [...this.state.list]; list.splice(index,1); this.setState({ list //list : list的简化,当key=value时可简化; }) } render(){ return ( <div> <div> <input value={this.state.inputValue} onChange={this.handleBtnChange.bind(this)}></input> <button onClick={this.handleBtnClick.bind(this)}>add</button> </div> <ul> {this.state.list.map((item,index)=>{ //循环list; return <li key={index} onClick={this.handleItemDelet.bind(this,index)}>{item}</li> })} </ul> </div> ); } } export default ToDoList;
查看全部 -
import React from 'react'; //React避免 Dom 操作,主要是面向数据操作; class ToDoList extends React.Component{ //state存放数据的地方; constructor(props){ super(props); this.state = { list:[], inputValue:'' } } //修改state用setState; handleBtnClick(){ this.setState({ list:[ ...this.state.list,//...:数组展开符; this.state.inputValue ], inputValue:''//为了让点击后input值清空; }); } //监听input值变化; handleBtnChange(e){ this.setState( { inputValue:e.target.value//获取变化值; } ); } render(){ return ( <div> <div> <input value={this.state.inputValue} onChange={this.handleBtnChange.bind(this)}></input> <button onClick={this.handleBtnClick.bind(this)}>add</button> </div> <ul> {this.state.list.map((item,index)=>{//循环list; return <li key={index}>{item}</li> })} </ul> </div> ); } } export default ToDoList;
查看全部 -
import React from 'react'; //React避免 Dom 操作,主要是面向数据操作; class ToDoList extends React.Component{ //state存放数据的地方; constructor(props){ super(props); this.state = { list:[ ] } } //修改state用setState; handleBtnClick(){ this.setState({ list:[ ...this.state.list, 'add css' ] }); } render(){ return ( <div> <div> <input></input> <button onClick={this.handleBtnClick.bind(this)}>add</button> </div> <ul> {this.state.list.map((item,index)=>{ return <li key={index}>{item}</li> })} </ul> </div> ); } } export default ToDoList;
查看全部 -
React.Fragment 等价于导入的Fragment
查看全部 -
组件最外层的div可以使用 React.Fragment元素代替,在渲染时不会显示最外层标签。
查看全部 -
[...arr,aa] 展开运算符
查看全部 -
jsx中只能写表达式不能写语句,此写法错误。
查看全部 -
react Fiber 是react Fiber之后的版本统称
查看全部 -
第一步: 安装 node
第二步 :利用脚手架 创建项目 npx create-react-app todolist
第三步:进入 todolist 文件后 运行项目 npm start
查看全部 -
react fiber 是指 react 16之后的版本所对应的 react ,对底层的核心算法进行了改良,引入了一些优先级的概念等,使代码运行的更加流畅
查看全部 -
jsx中的花括号中只能写表达式,而不能写语句。
查看全部
举报