react基础小结
1. 例子
import React from ‘react‘ import { render } from ‘react-dom‘ // 定义组件 class Hello extends React.Component { render() { // return 里面写jsx语法 return ( <p>hello world</p> ) } } // 渲染组件到页面 render( <Hello/>, document.getElementById(‘root‘) )
import React from ‘react‘这里的react对应的是./package.json
文件中dependencies
中的‘react‘
,即在该目录下用npm install
安装的 react 。npm 安装的 react 的物理文件是存放在./node_modules/react
中的,因此引用的东西肯定就在这个文件夹里面。./node_modules/react/package.json
中的"main": "react.js",
,这里的main
即指定了入口文件,即./node_modules/react/react.js
这个文件 2. jsx语法1)使用一个父节点包裹jsx中不能一次性返回零散的多个节点,如果有多个则包含到一个节点中如:
return ( <div> <p>段落1</p> <p>段落2</p> <p>段落3</p> </div> )
3. 注释jsx中用{/**/}的注释形式如:
return( //jsx外的注释 <div> {/*jsx里面的注释*/} <p>hello</p> </div> )
4. 样式
css样式:
<p className="class1">hello</p> <!--用className代替class*/
内联样式:
<p style={{color:‘red‘,fontSize:‘20px‘}}>hello</p> <!--注意{{}},和驼峰写法-->
5. 事件
如:click
class Hello extends React.Component{ render(){ return ( <p onClick={this.clickHandler.bind(this)}>hello</p> ) } clickHandler(event){ console.log(‘yes‘) } }
注意:onClick驼峰写法
6. 循环
7. 判断
jsx中一般会用到三元表达式(表达式也是放在{}中的)
如:
return( <div> <p>段落1</p> { true ? <p> true </p> : <p> false </p> </div> } </div> )
也可以这样使用:
<p style={{display: true? ‘block‘ ? ‘none‘}}> hello world</p>
8. 数据传递&数据变化
1) props
如果
<Header title="Hello页面"/>
在Header组件中可以这样取到
render(){ return( <p>{this.props.title}</p> ) }
在react中,父组件给子组件传递数据时,就是以上的方式,通过给子组件设置props,子组件获取props中的值便可完成数据传递。
2)props&state
如果组件内部自身的属性发生变化
class Hello extends React.Component{ constructor(props,context){ super(props,context); this.state={ //显示当前时间 now:Date.now() } } render(){ return( <div> <p>hello world {this.state.now}</p> </div> ) } }
react会实时监听每个组件的props和state值,一旦有变化,会立刻更新组件,将结果重新渲染到页面上
var LikeButton = React.createClass({ getInitialState: function (){ return {liked : false}; }, handleClick: function (event) { this.setState({liked: !this.state.liked}); }, render: function(){ var text = this.state.liked ? ‘like‘ : ‘haven\‘t liked‘; return ( <p onClick={this.handleClick}> you {text} this click to toggle </p> ); } });
3)智能组件&木偶组件
时间: 2024-11-10 07:50:57