1、react入门简单示例
<div id="box"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel">
//创建虚拟DOM
var vDom1=<h1>hello world!</h1>;
//渲染虚拟DOM
ReactDOM.render(vDom1,document.getElementById('box'));
</script>
2、JSX练习示例
JSX(全称:JavaScript和XML)
<div id="box1"></div>
<div id="box2"></div>
<script type="text/babel">
const myId='Some';
const contentt='I Like You';
//创建虚拟DOM
const vDom1=React.createElement('h2',{id:myId.toUpperCase()},contentt.toLowerCase())
//渲染虚拟DOM
ReactDOM.render(vDom1,document.getElementById('box1'));
//创建虚拟DOM
const vDom2=<h3 id={myId.toLowerCase()}>{contentt.toUpperCase()}</h3>
//渲染虚拟DOM
ReactDOM.render(vDom2,document.getElementById('box2'));
3、练习
<div id="box1"></div>
<div id="box2"></div>
<script type="text/babel">
const names=['some','import','yesterday','water','Tom'];
//创建虚拟DOM //数组map方法遍历
var vDom=<ul>
{names.map((value,index)=><li key={index}>{value}</li>)}
</ul>
//渲染虚拟DOM
ReactDOM.render(vDom,document.getElementById('box1'))
4、模块、组件;模块化与组件化
模块:一般针对于js文件
组件:一般针对于html+css+js文件形成的一个功能
模块化与组件化(针对与项目而言)
<div id="box1"></div>
<div id="box2"></div>
<script type="text/babel">
//定义组件
//方式1:工厂函数组件(简单组件)
function Mycomponent(){
return <h2>工厂函数组件(简单组件)</h2>
}
//渲染组件标签
ReactDOM.render(<Mycomponent/>,document.getElementById('box1'))
//ES6类组件(复杂组件)
class Mycomponent2 extends React.Component{
render(){
return <h2>ES6类组件(复杂组件)</h2>
}
}
//渲染组件标签
ReactDOM.render(<Mycomponent2/>,document.getElementById('box2'))
5、组件三大属性
class Mycomponent2 extends React.Component{
render(){
console.log(this)
return <h2>ES6类组件(复杂组件)</h2>
}
}
(1)states
states是组件对象最重要的属性,值是对象(可以包含多个数据)
初始化状态
constructor(props){
super(props);
this.states={
stateProp1:value1,
stateProp2:value2
}
}
读取某个状态值
this.state.statePropertyName
更新状态——组件界面更新
this.setState({
stateProp1:value1,
stateProp2.value2
})
栗子展示
//创建组件
class Like extends React.Component{
constructor(props) {
super(props);
//初始化状态
this.state={
isLikeMe:false
}
//将新增加方法中的this强制绑定为组件对象
this.HandleClik=this.HandleClik.bind(this)
}
//新添加的方法:内部的this默认不是组件对象,而是undefined
HandleClik(){
//得到状态
const isLikeMe=!this.state.isLikeMe;
//更新状态
this.setState({isLikeMe})
}
render(){
//读取状态
//const isLikeMe=this.state.isLikeMe
const {isLikeMe}=this.state;
return <h2 onClick={this.HandleClik}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>
}
}
//渲染组件标签
ReactDOM.render(<Like />,document.getElementById('box1'));
(2)props
prop-types
安装使用https://www.npmjs.com/package/prop-types
npm install --save prop-types
import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm
<!-- development version -->
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
<!-- production version -->
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<!-- development version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
<!-- production version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js"></script>
【1】读取属性值
this.props.propertyName
【2】对props中的属性值进行类型限制和必要性限制
Person.propTypes={
name:React.PropTypes.string.isRequired,
age:React.PropTypes.number.isRequired
}
【3】扩展属性:将对象的所有属性通过props传递
<Person {...person}/>
【4】默认属性值
Person.defaultProps={
name:'JUNE'
}
【5】组件类的构造函数
constructor(props){
super(props)
console.log(props)//查看所有属性
}
栗子展示
//创建组件
function Person(props){
return(
<ul>
<li>姓名{props.name}</li>
<li>年龄{props.age}</li>
<li>性别{props.sex}</li>
</ul>
)
}
const p1={
name:'TOM',
age:22,
sex:'女'
}
//渲染组件标签
ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById('box2'));
栗子展示
const p2={
name:'Jarry'
}
ReactDOM.render(<Person name={p2.name} />,document.getElementById('box2'));
完整栗子展示
//创建组件
function Person(props){
return(
<ul>
<li>姓名{props.name}</li>
<li>年龄{props.age}</li>
<li>性别{props.sex}</li>
</ul>
)
}
//指定属性默认值
Person.defaultProps={
age:18,
sex:'男'
}
Person.propTypes={
name:PropTypes.string.isRequired,
age:PropTypes.number
}
const p1={
name:'TOM',
age:22,
sex:'女'
}
const p2={
name:'Jarry'
}
//渲染组件标签
ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById('box1'));
//渲染组件标签
ReactDOM.render(<Person name={p2.name} />,document.getElementById('box2'));
class Person extends React.Component{
constructor(props) {
super(props);
}
render(){
return(
<ul>
<li>姓名{this.props.name}</li>
<li>年龄{this.props.age}</li>
<li>性别{this.props.sex}</li>
</ul>
)
}
}
(3)refs
方法一:
showInput(){
const cont=this.refs.cont;
alert(cont.value);
}
<input type="text" ref="cont"/>
方法二:
//创建组件
class Mycomponent extends React.Component{
constructor(props) {
super(props);
this.showInput=this.showInput.bind(this);
this.handleBlur=this.handleBlur.bind(this);
}
showInput(){
alert(this.cont.value);
}
handleBlur(event){
alert(event.target.value);
}
render(){
return(
<div>
<input type="text" ref={(cont)=>this.cont=cont}/>
<button onClick={this.showInput}>提示输入</button>
<input type="text" onBlur={this.handleBlur} placeholder="失去焦点作用"/>
</div>
)
}
}
//渲染组件标签
ReactDOM.render(<Mycomponent />,document.getElementById('box1'));
6、组件的组合
(1)拆分组件:拆分界面,抽取组件
(2)实现静态组件:
(3)实现动态组件:
- 动态显示初始化数据
- 交互功能(从绑定事件监听开始)
栗子实现
(1)步骤一:静态组件的是实现
//创建组件
class App extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div>
<h1>组件的组合使用</h1>
<Add/>
<List/>
</div>
)
}
}
class Add extends React.Component{
render(){
return(
<div>
<input type="text" />
<button>添加</button>
</div>
)
}
}
class List extends React.Component{
render(){
return(
<div>
<ul>
<li>ffff</li>
<li>sssss</li>
<li>hhhhh</li>
</ul>
</div>
)
}
}
//渲染组件标签
ReactDOM.render(<App />,document.getElementById('box1'));
(2)步骤二:动态显示数据
//创建组件
class App extends React.Component{
constructor(props){
super(props);
//初始化状态
this.state={
items:['fffffff','llllllllll','ggggggg']
}
}
render(){
const {items}=this.state;
return(
<div>
<h1>组件的组合使用</h1>
<Add/>
<List items={items}/>
</div>
)
}
}
class Add extends React.Component{
render(){
return(
<div>
<input type="text" />
<button>添加</button>
</div>
)
}
}
class List extends React.Component{
render(){
const {items}=this.props;
return(
<div>
<ul>
{items.map((value,index)=><li key={index}>{value}</li>)}
</ul>
</div>
)
}
}
List.propTypes={
items:PropTypes.array.isRequired
}
//渲染组件标签
ReactDOM.render(<App />,document.getElementById('box1'));
(3)交互功能实现
//创建组件
class App extends React.Component{
constructor(props){
super(props);
//初始化状态
this.state={
items:['fffffff','llllllllll','ggggggg']
}
this.addItem=this.addItem.bind(this);
}
addItem(item){
const {items}=this.state;
items.unshift(item);
//更新状态
this.setState({items})
}
render(){
const {items}=this.state;
return(
<div>
<h1>组件的组合使用</h1>
<Add count={items.length} addItem={this.addItem}/>
<List items={items}/>
</div>
)
}
}
class Add extends React.Component{
constructor(props) {
super(props);
this.addContent=this.addContent.bind(this);
}
addContent(){
//读取输入数据
const item=this.itemInput.value.trim();
//检查合法性
if(!item){
return
}
//添加
this.props.addItem(item);
//清除
this.itemInput.value=''
}
render(){
return(
<div>
<input type="text" ref={input=>this.itemInput=input}/>
<button onClick={this.addContent}>添加 #{this.props.count+1}</button>
</div>
)
}
}
Add.propTypes={
count:PropTypes.number.isRequired,
addItem:PropTypes.func.isRequired
}
class List extends React.Component{
render(){
const {items}=this.props;
return(
<div>
<ul>
{items.map((value,index)=><li key={index}>{value}</li>)}
</ul>
</div>
)
}
}
List.propTypes={
items:PropTypes.array.isRequired
}
//渲染组件标签
ReactDOM.render(<App />,document.getElementById('box1'));
总结:
- 一个组件只能有一个根节点.
- 子组件不能直接改变父组件的状态。
- 状态在那个组件,更新状态的行为就应该定义在那个组件。
- 父组件定义函数,传递给子组件,子组件调用。
7、组件——收集表单数据
包含表单的组件分类:
非受控组件:需要时手动读取表单输入框中的数量。 以下例子针对用户名
受控组件:表单项输入数据能自动收集成状态。以下例子针对密码
栗子展示
<div id="box1"></div>
<div id="box2"></div>
<script type="text/babel">
//创建组件
class LoginForm extends React.Component{
constructor(props){
super(props);
this.state={
pwd:''
}
this.handlerLogin=this.handlerLogin.bind(this);
this.handleChange=this.handleChange.bind(this);
}
handlerLogin(event){
const username=this.name.value;
const {pwd}=this.state;
alert(`用户名:${username},密码:${pwd}`);
event.preventDefault();
}
handleChange(event){
const pwd=event.target.value;
this.setState({pwd})
}
render(){
return(
<form action="/test" onSubmit={this.handlerLogin}>
<label>用户名:</label><input type="text" ref={(name)=>this.name=name}/>
<label>密码</label><input type="password" value={this.state.pwd} onChange={this.handleChange}/>
<input type="submit" value="登录"/>
</form>
)
}
}
//渲染组件标签
ReactDOM.render(<LoginForm/>,document.getElementById('box1'))