React基础

实例1：动态展示列表数据

<div id="box1"></div>
<!-- 如何将一个数据的数组转换为一个标签的数组？
使用数组的map() -->
<script type="text/babel">
    const names = ['张三','李四','王五','赵六']
    //1.创建虚拟DOM
    const ul = (
        <ul>
            {names.map((name,index)=><li key={index}>{name}</li>)}
        </ul>
    )
    //2.渲染虚拟DOM
    ReactDOM.render(ul,document.getElementById('box1'))
</script>

定义组件

<div id="box1"></div>
<div id="box2"></div>
<script type="text/babel">
    //1.定义组件
    // 方式1：工厂函数组件（简单组件）
    function MyComponent(){
    	return <h2>工厂函数组件（简单组件）</h2>
    }
    // 方式2：ES6类组件（复杂组件）
    class MyComponent2 extends React.Component{
        render(){
            return <h2>ES6类组件（复杂组件）</h2>
        }
    }
    // 2.渲染组件标签
    ReactDOM.render(<MyComponent />,document.getElementById('box1'))
    ReactDOM.render(<MyComponent2 />,document.getElementById('box2'))
</script>

组件三大属性：

1. state

   • 初始化状态：

     constructor(props){
     	super(props)
     	this.state = {
     		stateProp1: value1,
     		stateProp2: value2
     	}
     }
     

   • 读取某个状态值

     this.state.statePropertyName
     

   • 更新状态-->组件界面更新

     this.setState({
     	stateProp1: value1,
     	stateProp2: value2
     })
     

   <script type="text/babel">
       /*
       需求：自定义组件，功能说明如下
       1.显示h2标题，初始文本为：你喜欢我
       2.点击标题更新为：我喜欢你
       */
       // 1. 定义组件
       class Like extends React.Component{
           constructor(props){
               super(props)
               //初始化状态
               this.state = {
                   isLikeMe: false
               }
               this.handleClick = this.handleClick.bind(this)
       	}
           //新添加方法：内部的this默认不是组件对象，而是undefined
           handleClick(){
               //得到状态并取反
               const isLikeMe = !this.state.isLikeMe
               //更新状态
               this.setState({isLikeMe})
           }
           //重写组件类的方法
           render(){
               //读取状态
               const {isLikeMe} = this.state
               return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>
           }
       }
       // 2. 渲染组件标签
       ReactDOM.render(<Like /> , document.getElementById('box'))
   </script>
   

2. props

   <script src="node_modules/prop-types/prop-types.js"></script>
   <script type="text/babel">
           function Person(props){
               return (
                   <ul>
                       <li>姓名：{props.name}</li>
                       <li>年龄：{props.age}</li>
                       <li>性别：{props.sex}</li>
                   </ul>
               )
           }
           //指定属性默认值
           Person.defaultProps = {
               sex: '男',
               age: 18
           }
           Person.propTypes = {
               name: PropTypes.string.isRequired,
               age: PropTypes.number
           }
           const p1 = {
               name: '张三',
               age: 20,
               sex: '男'
           }
           ReactDOM.render(
               //扩展属性：将对象的所有属性通过props传递
               <Person name={p1.name} age={p1.age} sex={p1.sex} />,
               document.getElementById('box')
           )
           // ReactDOM.render(
           //     //与上面等同，...的作用：
       	//		//1.打包 2.解包
           //     <Person {...p1} />,
           //     document.getElementById('box')
           // )
       </script>
   

3. refs与事件处理

   <script type="text/babel">
       /*
           需求：自定义组件，功能说明如下：
           1.点击按钮，提示第一个输入框中的值
           2.当第2个输入框失去焦点，提示这个输入框中的值
       */
           class MyComponent extends React.Component{
               constructor(props){
                   super(props)
                   this.showInput = this.showInput.bind(this)
                   this.handleBlur = this.handleBlur.bind(this)
               }
               showInput(){
                   // const input = this.refs.content
                   alert(this.input.value)
                   this.input.value = ''
               }
               handleBlur(event){
                   alert(event.target.value)
               }
               render(){
                   return (
                       <div>
                           <input type="text" ref={input=>this.input = input}/>&nbsp;&nbsp;
                           <button onClick={this.showInput}>提示输入</button>&nbsp;&nbsp;
                           <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>
                       </div>
                   )
               }
           }
           ReactDOM.render(
               <MyComponent />,
               document.getElementById('box')
           )
       </script>