React从入门到实战 - React初体验

特点

1. 采用组件化模式，声明式编程，提高开发效率及组件复用率
2. 在React Native 中使用React语法进行移动端开发
3. 使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

相关JS库

1. babel.min.js (Es6 == > ES5, jsx===>js)
2. react.development.js核心库
3. react-dom.development.js 扩展库

步骤

准备步骤

• 准备一个容器
• 引入react核心库
• 引入react-dom，用于支持react操作dom
• 引入babel，用于将jsx转为js
• 使用srcipt标签，注意一定要type=‘text/babel’

操作步骤

1. 创建虚拟Dom

const VDOM = <h1>hello,React</h1>   // 不需要写引号，因为不是字符串

2. 渲染虚拟DOM到页面 ReactDOM.render(虚拟DOM,容器)

ReactDOM.render(VDOM,document.getElementById("test"))

关于虚拟DOM

1. 本质是Object类型的对象（一般对象）
2. 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

JSX语法规则

1. 定义虚拟DOM页面时，不要写引号
2. 标签重混入JS表达式时要用{}
3. 样式得类名指定不要用class，要用className
4. 内联样式，要用style={{key:value}}的形式去写
5. 虚拟DOM只有一个根标签
6. 标签必须闭合
7. 标签首字母
   • 若小写字母开头，则将标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
   • 若大写字母开头，react就去渲染对应的组件

函数式组件

常见的几种错误

(1)

• 错误写法：

  // 创建函数式组件
    function demo(){
        return <h1>我是函数式组件</h1>
    }
    // 渲染虚拟DOM到页面
    ReactDOM.render(demo,document.getElementById("test"))

• 报错：

• 原因：

函数式组件是个组件，应该使用标签，而不是直接写demo

(2)

• 错误写法：

    // 创建函数式组件
    function demo(){
        return <h1>我是函数式组件</h1>
    }
    // 渲染虚拟DOM到页面
    ReactDOM.render(<demo/>,document.getElementById("test"))

• 报错

• 原因

根据JSX语法规则，如果标签首字母小写，则为html同名元素，由于html中不存在标签叫做demo的元素，所以报错。因为在定义组件的时候我们应该首字母大写。

正确写法

    // 创建函数式组件
    function Demo(){
        return <h1>我是函数式组件</h1>
    }
    // 渲染虚拟DOM到页面
    ReactDOM.render(<Demo/>,document.getElementById("test"))

类式组件

1. 自定义的组件需要继承react的components类（React.Component）
2. 必须要有render() 且render必须要有返回值
3. 有state状态的是复杂组件，没有的是简单组件

<script type="text/babel">
    class MyComponent extends React.Component {
        render(){
            return <h1>我是复杂组件</h1>
        }
    }
    // 渲染虚拟DOM到页面
    ReactDOM.render(<MyComponent/>,document.getElementById("test"))
</script>