React快速上手（一）jsx语法与组件

写在前面
在写惯了vue之后再来接触react，第一感觉是怀疑人生,这也太不方便了吧…不知有没有人有同感
但是还是决定把react系统的看一看，作为三大框架之一，肯定有它存在的道理不是吗，再加上react-native的诱惑,还是决定入坑
学不…不，你还能学

jsx

何为jsx

const element = <h1>Hello, world!</h1>;

这个不是字符串，也不是html的奇怪东西就是jsx，是js的一种语法扩展，通常在react中我们会使用这种语法，他可以生成react的“元素”，然后react会将这些元素渲染成dom

jsx有一些独特的语法

const name = 'jack'
const bol = Math.random() > 0.5;
const str = '987654321'
const nameFilter = (data) => {
        return "你好" + data.name + (data.gender == "男" ? "先生" : "女士");
      };
const el = (
	// 一个jsx元素中只能有一个根节点
	// jsx中的注释不同于html和js，要在jsx中书写注释，需要使用{/* */} 在jsx标签外则可以使用普通的js注释
	<div>
          {/* 这是jsx中的注释*/}
				
          <h1>hello world!</h1>{/* 这是一个普通的标签 */}
          
          <p>{name}</p> {/* 可以使用{}来向里面嵌入表达式 */}
          
          <p>{nameFilter ({ name: "mike", gender: "男" })}</p>{/* 可以调用方法 */}
          
          <p>{bol ? "大于0.5" : "小于0.5"}</p>{/* 也可以使用三元表达式 */}
          
          <p>{str.split("").reverse().join("")}</p>{/* 字符串反转 */}
          
          <input type="button" value="按我" />{/* 单标签与html不同,需要在结尾加上/,否则会报错 */}
          <img src="/images/1.jpg" alt="" />
          
          <p className='red'>红色</p>{/* 设置类名等属性遵循js的驼峰命名法,设置class要使用className */}
          <p id={bol ? "blue" : ""}>不一定是蓝色</p>{/* 属性也可以通过{}来嵌入表达式 */}

		  {/* 设置样式要提供一个对象,以键值对的形式设置,并且样式名字也遵循js的命名,如font-size要写成fontSize */}
          <p
            style={{
              color: bol ? "red" : "blue",
              fontSize: "20px",
              paddingLeft: `${num / 10}px`,
            }}
          >
            12345
          </p>
       </div>
      );
)

完成这样一堆奇怪的东西后，我们就可以使用react提供的方法，将他挂载到dom上，完成渲染了

// el可以是一个jsx元素，也可以是一个组件
ReactDOM.render(el, document.getElementById("root"));

组件

组件可以将 UI 拆分为独立可复用的代码片段，react的开发通常都是用非常多小的组件拼成一个大的组件
组件分为两种，函数组件与class组件

函数组件
函数组件是定义react组件最简单的方式

function SayHi(props) {
  return <h1>hi, {props.name}</h1>;
}

函数组件接受一个唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素

class组件
使用es6的class来定义组件也是可以的

// 通过class声明的组件要继承React.Component
class SayHi extends React.Component {
  render() {
    return <h1>hi, {this.props.name}</h1>;
  }
}

这两个组件所展示的效果是一致的

组件使用
自定义组件通常以标签的形式来使用

const el = <div>元素可以是标签</div>
// 也可以是一个组件
const elByComponent = <SayHi name="bob" />

要注意组件名称必须以大写字母开头，React 会将以小写字母开头的组件视为原生 DOM 标签

props
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。
这个props是只读的，无论是通过函数声明还是class声明的组件，都决不能修改其中的props

组合组件
组件可以在其输出中引用其他组件

class Habbit extends React.Component {
        render() {
          return <p>我喜欢{this.props.habbit}</p>
        }
      }
      function App(props) {
        return (
          <div>
          	<h1>大家好我是{props.name}</h1>
            <Habbit habbit="唱" />
            <Habbit habbit="跳" />
            <Habbit habbit="RAP" />
            <Habbit habbit="打篮球" />
          </div>
        );
      }
      ReactDOM.render(<App name='cxk' />, document.getElementById("root"));

这里声明了2个组件，一个是通过class声明的Habbit组件，另外一个是通过函数声明的App组件
App组件作为根组件，在内部渲染了4个Habbit组件，通过不同的habbit属性，这几个Habbit组件所展示的内容也不一样
同时App组件自己也接受一个name属性，随后将App组件渲染至dom上，就出现了如下效果

到目前为止，我们的组件都是静态的，无法更新，唯一更新的方法就是重新调用ReactDOM.render方法，当然这肯定不是官方推荐的做法，下一部分会讲到react的另一个核心概念：state 以及react的事件绑定