react基础使用(一)

一直想整理下关于react基本知识的内容，但是没有时间，抽时间补上,欢迎评论交流，如有不对的地方，望指教

1.基础使用，不用cli脚手架

示例：
新建html文件，如果不用脚手架构建的话需要引用js文件
react.development.js
react-dom.development.js
babel.mn.js

基本的代码流程
<script>
1：创建虚拟dom元素对象
var dom = <h1>hello nihao</h1>
2：将虚拟dom渲染到页面真是的dom中
React.render(dom,document.getElementById('元素id'))
</script>

2.虚拟dom

1.React提供一些api来创建一种一些js对象-就是所谓的虚拟dom
    例如：var dom = React.createElement('h1',{id:'name'},'zpc')
    上边示例是用纯js语法创建虚拟dom节点，但是一般比较繁琐，所以一般不推荐使用，推荐使用jsx语法
2.虚拟dom对象最终会被React转换真实的dom，我们操作虚拟dom对象，react会将转化之后的真实的dom元素进行更新

3.react使用的是xml的js扩展语法jsx

jsx语法自身是不能被识别的吗，这就需要使用到上边引入的文件babel.js进行转换
基本的语法规则：
    1：有<开头的内容的话，解析为html
    2:有{开头的内容的话，解析为js

4.渲染虚拟dom元素为真是的dom元素

语法结构
    ReactDOM.render(虚拟dom,真是dom节点)

5.react组件的基本定义及使用

现在还是不用cli脚手架，引入js文件如上问所述
基本代码使用

定义组件方式1：工厂函数方式
<script type="text/babel">
    function name(){ // 定义基本组件
        return <h1>基本组件</h1>
    }
    ReactDOM.rendr(<name/>,获取的元素节点)  // 虚拟dom渲染为真实的dom节点
<script>


定义组件方式2：组件类方式--虚拟组件渲染时候，会实例化组件对象进行不render方法调用
<script type="text/babel">
    class name extends React.Component {
        render(){
            console.log(this) // 此处的this是指组价类对象state props refs
            return <h1>zpc</h1>
        }
    }
    ReactDOM.render(<name/>,获取的元素节点)  // 虚拟dom渲染为真实的dom节点
<script>

6.组三大属性之state

state是组件对象的三大属性之一，值是对象
通过更新组件中state会自动进行页面的显示内容的更新
代码示例：
一： 初始化状态
    constructor(props){
        super(props) // 调用父类的构造函数，将props对象交给父类去进行管理
        this.state={
            name:value
        }
    }
二：读取
    this.state.name
三：更新
    this.setState({
      name: value  
    })

7.虚拟dom中进行事件操作

以继承方式创建组件示例 为虚拟dom添加change事件--注意this的指向问题.需要把this指向组件对象
<script type="text/babel">
    class name extends React.Component {
        constructor(){
            // 将新增的方法中的this强制绑定为组件对象
            this.change = this.change.bind(this)
        },
        change(){
            console.log('zpc')
            console.log(this)
        },
        render(){
            console.log(this) // 此处的this是指组价类对象state props refs
            return <h1 onClick={this.change}>zpc</h1>
        }
    }
    ReactDOM.render(<name/>,获取的元素节点)  // 虚拟dom渲染为真实的dom节点
<script>

8.组件三大属性之props

简单代码示例：进行虚拟dom节点渲染时候进行props参数传递，在自定义组件内部可以props.进行接收
var obj = {
    name:'zpc',
    age: 
}
ReactDOM.render(<Name name={obj.name} age={obj.age}/>,获取的真实dom元素节点)

上边如果属性值不传的话，就是空的，react语法提供了我们可以指定默认值
Name.defaultProps = {
    name: 'zpc',
    age: 18
}
react也提供了我们进行属性传递时候的数据类型限制，但是必须引入prop-types.js

Name.propTypes = {
    name:PropTypes.string.isRequired,
    age:PropTypes.number.isRequired
}

上边的属性默认值和数据类型的限制，是在虚拟dom进行加载参数传递时，react进行类似于中间件的校验

9.组件三大属性之refs

dom节点添加ref="名称"
根据ref标识 this.refs.名称：  这样就得到这个节点
代码简单示例：
<input ref="content"></input> // 添加标识
this.refs.content // 得到节点
this.refs.content.value //得到input的值

10.受控和非受控组件的区别

官网推荐使用受控组件实现表单操作
react思想上来说尽量不要过多地额操作dom
非受控组件示例：
    // 给react组件添加新的属性a直接绑定到this上，input代表该节点对象
    <input ref={input => this.a = input}></input>
受控组件就是直接绑定事件操作

11.组件的生命周期

组件的生命周期的状态--每个状态都提供了钩子函数
Mount: 进行插入真实dom的过程
Update:被重新渲染的过程
Unmount:被移除dom的过程

初始化渲染显示的钩子函数--第一次渲染
initial()
constructor()
componentWillMount()
render()
componentDidMount()
每次dom节点进行更新的钩子函数---state.setState()
componentWillUpdate()
render()
componentDidUpdate()
移除组件的的钩子函数 -- ReactDOM.unmountCompnentAtNode(dom)
componentWillUnmount()

12.react 真实dom和虚拟dom之间根据diff算法进行对比，基本原理

1.初始化阶段
    初始化界面创建虚拟dom对象 --挂载》 真实的dom树显示界面
2. 进行dom操作阶段
    setState() 更新状态
    重建虚拟dom树结构
    新旧dom进行对比，差异化
    更新差异到对应的真实的dom树中
    局部就行界面更新绘制

下篇继续以cli脚手架示例