React

react 基础之组件篇一_react

react.png

前言

你问我为什么写博客? 因为阿拉斯加爱写bugger！！！
如有问题或建议，请往公众号，我们一起交流如何写bugger !

首先

学一门技术之前，首先得知道三件事：

  1. 是什么东西？

  2. 能干什么？

  3. 怎么用？

     

1. React是什么？

在react还没出来之前，Jquery与angular还一直在打架，打架？噢No! 说错，是二虎在争夺前端江山。jquery做为前端大佬已经好多年了，虽然统治力强，而angular做为新一代许文强，潜力非凡，打着打着，过了一二年，眼看angular就要大胜之际，杀出个第三者新二代许文强react，从此三人混架了，再后来第四者新三代许文强 vue 又出来了，毕竟长江后浪推前浪，前浪死在沙滩上，最终jquery惨淡收场，而前端界形成了三足鼎立之势。react、vue、angular。

React 来自于 Facebook。

特点：

  1. 声明式

  2. 组件化

  3. 一次学习，到处编码

     

2. react 能干什么?

用于构建用户界面的 JavaScript 库。
能做更多：

1、Web: https://facebook.github.io/react/
2、Native: https://facebook.github.io/react-native/
3、TV: https://github.com/jordanbyron/react-native/tree/tvOS
4、Desktop: https://github.com/ptmt/react-native-desktop
…

React 特性：

1、用 JSX 语法取代 HTML 模板，在 JavaScript 里声明式地描述 UI
2、虚拟 DOM 取代物理 DOM 作为操作对象，封装了 DOM 的事件系统
3、单向数据流动
4、组件和基于组件的设计流程

3. react 怎么用？

1. JSX

Facebook 创造了 JSX 语法，取代了我们常用的模板引擎，允许我们可以直接在 js 文件中来使用 JSX，这种语法结合了 HTML 和 JavaScript 的优势，既能像平常一样使用 HTML，同时又能在 HTML 中使用强大的 JavaScript 语言。相当于我们可以把 View 和 JavaScript 逻辑写在同一个文件里面。

用官网的栗子:
考虑一下这个变量的声明：
const element = <h1>Hello, world!</h1>;
这种有趣的标签语法既不是字符串也不是HTML。

这就是 JSX ，他是 JavaScrip 的一种扩展语法。我们推荐在 React 中使用这种语法来描述 UI 信息。JSX 可能会让你想起某种模板语言，但是它具有 JavaScrip 的全部能力。

JSX 中嵌入表达式

你可以用 花括号 把任意的 JavaScript 表达式 嵌入到 JSX 中。

例如，2 + 2， user.firstName， 和 formatName(user)，这些都是可用的表达式。

function formatName(user) {  
   return user.firstName + ' ' + user.lastName;
}
const user = {  firstName: 'Harper',  lastName: 'Perez'};
const element = (  <h1>
    Hello, {formatName(user)}!  </h1>

);

ReactDOM.render(
  element,  document.getElementById('root')
);

jsx具体详细的用法，还得参考官网 http://www.css88.com/react/docs/introducing-jsx.html

2. 组件

组件使你可以将 UI 划分为一个一个独立，可复用的小部件，并可以对每个部件进行单独的设计。
程序员的第一个程序 Hello World!
不多说，直接上代码：

<body>
        <div id="container"></div>
        <script type="text/babel">
            var destination = document.querySelector("#container");
            ReactDOM.render(               

             <h1>I am Tyler</h1>,
                destination
            )        

             
          </script>
 </body>

效果:

 

react 基础之组件篇一_react _02

image.png

<div id="container"></div> 这个是一个 “container” DOM 节点，因为该节点内的所有内容都由 React DOM 管理,而且内容会挂载到这个节点上。
审查元素会发现：

 

react 基础之组件篇一_react _03

image.png

render的内容都被包含在container里面。
要渲染一个 React 元素到一个 root DOM 节点，把它们传递给 ReactDOM.render() 方法即可。

2. 组件与props

当 React 遇到一个代表用户定义组件的元素时，它将 JSX 属性以一个单独对象的形式传递给相应的组件。 我们将其称为 “props” 对象。
看下面的代码 ：

<body>    
    <div id="container"></div>
    <script type="text/babel">        
        var HelloWorld = React.createClass({ 
            render: function() { 
                return (                    
                    <div>
                        <p>Hello, {this.props.greetTarget}</p>
                    </div>
                ); 
            } 
        }); 
        ReactDOM.render(            
            <div>
                <HelloWorld greetTarget="myName" />
                <HelloWorld greetTarget="Nancy" />
                <HelloWorld greetTarget="Jacket" />
            </div>, 
            document.querySelector("#container") 
        );   
 </script>

</body>
Props 是只读的

我们定义了一个HelloWorld的组件，要在组件里面要接收属性，就要在元素里面用 { } 包起来，且要写成 this.props.* 的形式，接收来自父级传来的属性值 greetTarget，而父级也要把属性传进来才行，像 greetTarget="Tyler" 。
render的内容都被包含在container里面。
要渲染一个 React 元素到一个 root DOM 节点，把它们传递给 ReactDOM.render() 方法即可。
我们简单扼要重述一下上面这个例子:

  1. 我们调用了 ReactDOM.render() 方法并向其中传入了 <HelloWorld greetTarget="myName" /> 元素。

  2. React 调用 Welcome 组件，并向其中传入了 {name: 'myName'} 作为 props 对象。

  3. Welcome 组件返回 <h1>Hello, myName</h1>。

  4. React DOM 迅速更新 DOM ，使其显示为 <h1>Hello, myName</h1>。

     

警告：组件名称总是以大写字母开始。
举例来说, <div /> 代表一个 DOM 标签，而 <HelloWorld /> 则代表一个组件，并且需要在作用域中有一个 HelloWorld 组件。

虽然 React 很灵活，但是它有一条严格的规则：

所有 React 组件都必须是纯函数，并禁止修改其自身 props 。
4. 后语

虽然看上去很简单，但是建议初学者自己敲一遍，可能会出现各种各样的问题。学习，千万不能有所见即所得的想法，实践才是检验真理的唯一标准。

好啦，本节内容就到这里，下节内容：「react 基础之组件篇二」 将讲解 Style in React 样式在react中的应用。

 

react 基础之组件篇一_react _04