react

react—jsx与渲染

jsx是什么?

jsx对js进行了语法扩展,可让我们在js中嵌入任何html标签,可以把html标签存入变量等操作,它是拥有js的全部功能;
但是我们以script标签引入react的方式使用jsx是需要Babel进行转化的,不然script是不会识别jsx;
jsx根元素只能有一个元素或组件,若需要换行必须用()包裹。
jsx示例如下:

const el = (
  <h1 className="react">
    Hello, React!
  </h1>
);

jsx中嵌入表达式

const name = "RocYuan";
const el = <p>{name}</p>

jsx中添加class属性等

// jsx中为了区分css属性的class与es6的class,属性的class则用className,label标签中的for则用htmlFor替换
const el = <p className="name">{name}</p>
<label htmlFor="inputName"></label>

// 所有添加的属性如果为动态都可用{}嵌入
const name = "RocYuan";
const titleMessage = "RocYuanMessage"
const el = <p title={titleMessage } className="name">{name}</p>

// 添加img的url
const element = <img src={user.avatarUrl} />;

...其他属性嵌入皆可用{}

jsx中绑定事件

<button onClick={e => console.log(点击了按钮)}>按钮</button>

jsx条件渲染

React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符来创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。完全可以模拟vue中的v-if 、v-show…

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

jsx中列表渲染及key

渲染列表我门可以使用map方法

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      movies: ["哪吒", "西游记", "三国演义"]
    }
  }
  render() {
    return (
      <div>
        {
          this.state.movies.map((item, index) => {
            // 这里key暂时用index,但这样是不对的,开发时应用唯一标识id之类(作用就不用多说了)
            return <p key={index}>{item}</p>
          })
        }
      </div>
    )
  }
}

jsx中表单元素

React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用this.setState()来更新。

https://react.docschina.org/docs/forms.html

渲染

元素渲染使用react-dom中的render函数渲染。
它需要三个参数:
1. 渲染的组件
2. 需要插入的DOM节点
3. 渲染后的回调(但是一般用不到,所以可不传)

function App() {
  return(
    <div>
      <h2>App</h2>
    </div>
  )
}
ReactDOM.render(
  <App>,
  document.getElementById("root");
)

jsx的本质

实际上,jsx是FB为我们提供的一种语法糖,Babel 会把 JSX 转译成React对象中的createElement方法(当然我们也可以直接调用它,不使用jsx),vue3中的Vue.h()方法也是借鉴这的。

可通过babel网站工具看到jsx用js的实现的写法:https://www.babeljs.cn/repl

const el = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

1,124条评论

  • bbauc

    Howdy, i read your blog from time to time and i own a similar one
    and i was just curious if you get a lot of spam comments? If so how
    do you stop it, any plugin or anything you can advise?
    I get so much lately it’s driving me insane so any assistance is very much appreciated.

  • Loren

    What i don’t understood is in truth how you’re no longer actually much more smartly-appreciated than you might be now.

    You’re very intelligent. You understand therefore considerably in relation to this topic, produced me individually imagine it from
    a lot of numerous angles. Its like men and women aren’t fascinated unless it
    is one thing to do with Woman gaga! Your personal stuffs excellent.

    At all times care for it up!

Leave a Reply

邮箱地址不会被公开。