绵阳建设招投标在哪个网站,淄博网站备案,成都公司注册多少钱,温州网站建设钱主要是现在要改一个开源项目#xff0c;需要学习下React入门#xff0c;在此记录一下。 几个关键的库
React底层核心#xff1a;react.development.js
React操作DOM库#xff1a;react-dom.development.js
解析ES6语法#xff1a;babel.min.js
React.createElement() …主要是现在要改一个开源项目需要学习下React入门在此记录一下。 几个关键的库
React底层核心react.development.js
React操作DOM库react-dom.development.js
解析ES6语法babel.min.js
React.createElement() //创建元素
如创建一个节点
let hello ReactDOM.createElement(h1, {}, Hello World)ReactDOM.render() //渲染元素
如
ReactDOM.render(hello, document.getElementById(app1))
或如
script type text/babelReactDom.render(h1Hello World/h1document.getElementById(app);)/scriptReact.Component //创建组建使用extends继承
添加Class
style.yellow{Color: yellow;}/style
ES5
let hello React.createElement(h1,{className: yellow},ReactDOM.render(hello, document.getElementById(app));)
ES6
let world worldlet hello h1 classNameyellowHello {world}/h1ReactDOM.render(template,Document.getElementById(app)) 元素渲染数据动态更新
function tick(){let time new Date().toLocaleTimeString();let template divh1 className”red”Hello world/h1h2现在是: {time}/h2/divReactDOM.render(template,Document.getElementById(app))}setInterval(tick, 1000) 组件
React中组件
无状态组件函数式组件
①直接定义函数的形式不存在state只会有props没有生命周期
②只展示不修改用无状态组件
③传值时无状态组件取值用props.属性。 有状态组件React.Component
①使用class定义extends继承有state进行数据的存储和管理还可以用props有生命周期
②不仅仅展示还要修改用无状态组建。
③传值时有状态组件取值用this.state或this.props.属性。 无状态组建
div idapp1/divscript typetext/babel//函数式组建function Hello(){return h1Hello World/h1}ReactDOM.render(Hello/,Document.getElementById(app1))/script 如props传值无状态组建
div idapp1/divscript typetext/babel//函数式组建function Hello(){return divh1姓名{props.name}/h1h2年龄{props.age}/h1/div}ReactDOM.render(Hello nameit1995 age18 /,Document.getElementById(app1))/script 如有状态组建
div idapp1/divscript typetext/babelclass Hello extends React.Component {//有状态组建需要使用render方法是生命周期的底层方法render(){return h1Hello World/h1}}ReactDOM.render(Hello/,document.getElementById(app1))/script 如props传值有状态组件
div idapp1/divscript typetext/babelclass Hello extends React.Component {//有状态组建需要使用render方法是生命周期的底层方法render(){return divh1姓名{this.props.name}/h1h1年龄{this.props.age}/h1/div}}ReactDOM.render(Hello nameit1995 age18/,document.getElementById(app1‘’))/script 事件处理
div idapp1/divscript typetext/babelclass Hello extends React.Component {constructor(props){super(props) //需要先让父类先处理下this.state { //这种情况只能放到this.state中name: ‘it1995’,age: 20}this.updateInfo this.updateInfo.bind(this)}updateInfo () {this.setState({ //这里必须用setStatename: it1995,age: 18})}updateInfo2(){ //如果这样定义函数this.setState({ //这里必须用setStatename: it1995,age: 18})}updateInfo3(){ //如果这样定义函数this.setState({ //这里必须用setStatename: it1995,age: 18})}updateInfo4(){ //如果这样定义函数this.setState({ //这里必须用setStatename: it1995,age: 18})}//有状态组建需要使用render方法是生命周期的底层方法render(){return divh1姓名{this.state.name}/h1h1年龄{this.state.age}/h1button onClick{this.updateInfo}更新数据/buttonbutton onClick{this.updateInfo2}更新数据/buttonbutton onClick{()this.updateInfo3()}更新数据/buttonbutton onClick{this.updateInfo4()}更新数据/button/div}}ReactDOM.render(Hello nameit1995 age18/,document.getElementById(app1))/script 列表渲染
div idapp1/divscript typetext/babelclass Hello extends React.Component {state {list: [1, 2,3,4,5]}//有状态组建需要使用render方法是生命周期的底层方法render(){const arr this.state.listconst lists []for(let i 0; i arr.length; i){let li li{arr[i]}/lilists.push(li)}return divul{lists}/ul/div}}ReactDOM.render(Hello /,document.getElementById(app1))/script 循环Key的使用
div idapp1/divscript typetext/babelclass Hello extends React.Component {state {list: [1, 2,3,4,5]}//有状态组建需要使用render方法是生命周期的底层方法render(){const arr this.state.listconst lists []arr.map((item, index) {let li li key{index}{item}/lilists.push(li);})return divul{lists}/ul/div}}ReactDOM.render(Hello /,document.getElementById(app1))/script 列表循环
div idapp1/divscript typetext/babelclass Hello extends React.Component {state {list: [{id: 1, txt: Java},{id: 2, txt: C/C},{id: 3, txt: JavaScript}]}//有状态组建需要使用render方法是生命周期的底层方法render(){const arr this.state.listconst lists []arr.map((item, index) {let li li key{index.id}{item.txt}/lilists.push(li);})return divul{lists}/ul/div}}ReactDOM.render(Hello /,document.getElementById(app1))/script 条件处理
div idapp1/divscript typetext/babelfunction Login(){return buttonLogin/button}function Logout(){return buttonLogout/button}class App extends React.Component {state {isLogin: true}//有状态组建需要使用render方法是生命周期的底层方法render(){const {isLogin} this.statereturn div{isLogin ? Login/ : Logout/}/div}}ReactDOM.render(App/,document.getElementById(app1))/script 优化写法
div idapp1/divscript typetext/babelfunction Login(){return buttonLogin/button}function Logout(){return buttonLogout/button}class App extends React.Component {state {isLogin: true}//有状态组建需要使用render方法是生命周期的底层方法render(){const isLogin this.state.isLoginlet buttonif(isLogin)Button Login/elseButton Logout/return div{button}/div}}ReactDOM.render(App/,document.getElementById(app1))/script 条件事件处理
div idapp1/divscript typetext/babelfunction Login(){return buttonLogin/button}function Logout(){return buttonLogout/button}class App extends React.Component {state {isLogin: true}updateInfo1 () {this.setState({isLogin: !this.state.isLogin})}updateInfo2(){this.setState({isLogin: !this.state.isLogin})}//有状态组建需要使用render方法是生命周期的底层方法render(){const isLogin this.state.isLoginreturn div{isLogin ? Login/ : Logout/}button onClick{this.updateInfo1}更新数据/buttonbutton onClick{this.updateInfo2.bind(this)}更新数据/button/div}}ReactDOM.render(App/,document.getElementById(app))/script
