React的学习

• 用webstorm开发React要注意了，如果了用了webpack管理代码的话，一定要在webstrom设置里设置
• 点击settings -------->搜索“safe writing”------------------>去掉对应的勾如图所示：

环境的搭建

• 安装node
• npm 淘宝镜像
• 在github上搜索create-react-app 脚手架 - 安装顺序：npm install -g create-react-app - create-react-app my-app（可以在指定的目录下创建） - cd my-app/ - npm start

目录结构

• my-app/
• README.md
• node_modules/
• package.json
• .gitignore
• public/
• favicon.ico
• index.html
• src/ -App.css
• App.js
• App.test.js
• index.css
• index.js
• logo.svg

js模块化

a.js
var aaa=111;
module.export=aaa;
----
b.js
var value=require('./aa');
console.log(value)

简单的helloword的实现

import React from 'react';
import ReactDOM from 'react-dom';
 
//定义react组件名称：一定要大写
var Hello=React.createClass({
    /*******state属性用getInitialState()来设置默认的值*******/
    getInitialState(){
        return{
            text:0,name:'今天下雨了'
        }
    },//两种方法
    // render:function(){
    render(){
        //可以写下个变量
        var name='小样';
        var test="社会生活";
        return(
            //后面一定是要jxs语法，只能是双标签
            <div>
                <p>hello{name}</p>
                <p>hello{test}</p>
                {/*这里调用getInitialState方法的属性的值*/}
                <p>hello{this.state.text}</p>
                {/*react的点击事件必须遵循陀峰命名法*/}
                <button onClick={this.fun} >按钮</button>
                {/*一个组件只做一件事例如*/}
                <p>hello</p>
                {/*直接调用另一个组件的名称,单向数据流*/}
                {/*<Who name="你懂得！"/>*/}
                <Who name={this.state.name}/>
                {/*实现双向数据绑定效果,键盘不能输入，解决方法添加onChange事件*/}
                <input type="text" value={this.state.name}  onChange={this.change}/>
            </div>
        )
    },fun:function () {
    //获取组件内部state的默认值
        var value=this.state.text;
        value++;
        //设置state的默认值,实现局部刷新
        this.setState({
            text:value
        })
    },change:function (e) {
        this.setState({
            name:e.target.value
        })
    }
})
//子组件设置props属性，父组件就可以拿到子组件的属性
var Who=React.createClass({
    render(){
        return(
           <div>
               {this.props.name}
           </div>
        )
    }
})
//渲染组件的名称
ReactDOM.render(<Hello/>,document.getElementById("root"))

组件生命周期图

组件生命周期

• 初始化
• 存在期
• 销毁期间

组件化

按照组件功能划分目录结构

初始化

1. getDefaultProps（设置组件默认属性）不常用
2. getInitialState （设置组件默认状态）常用
3. componentWillMount （组件将要渲染）不常用
4. render （必须用）
5. componentDidMount （组件渲染完毕）常用

存在期间

1. componentWillReceiveProps （组件接受到了新的属性）常用
2. componentWillUpdate （组件将要更新）做性能优化时使用 ---我从来没用过
3. render

销毁期

1. componentWillUnmount （组件在销毁前）

/--------------------------------------------------------------------------------------------------------------------------/

• 组件的生命周期分成三个状态：
  • Mounting：已插入真实 DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真实 DOM
• 处理函数
  • React 为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate(object nextProps,object nextState)
  • componentDidUpdate(object prevProps,object prevState)
  • componentWillUnmount()
• 此外，React 还提供两种特殊状态的处理函数。
  • componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
  • shouldComponentUpdate(object nextProps,object nextState)：组件判断是否重新渲染时调用

react循环渲染数据

import React from 'react';
import './child.css'
var ChildB=React.createClass({
//放在state属性下面
    getInitialState(){
      return {
          item:[
              '用户点击了1次','用户点击了1次','用户点击了1次'
          ]
      }
    },render(){
//用map方法来循环，o代表每一项，i代表个数
        var value=this.state.item.map(function (o,i) {
            return(
                <li>{o}+{i}</li>
            )
        })
        return(
            <div className='child'>
                <p>子组件{this.props.name}</p>
                <ul>
//调用循环的值
                    {value}
                </ul>
            </div>
        )
    }
})
module.exports=ChildB;