react 基础语法使用

避嫌远疑所以无误 發表於 2019-10-24 17:28:00

刚开始不久react，在菜鸟上及其他前辈网站上学习，下面开始我的自学笔记。
　　包括：
<ul>
<li>渲染元素</li>
<li>组件（函数方法定义、es6 class定义）</li>
<li>事件处理</li>
<li>条件渲染</li>
<li>列表</li>
</ul>
　　下面代码部分将不会再写html部分，html部分如下：
<div class="cnblogs_code">
<pre><div id="example"></div></pre>
</div>
　　多余的话不多说，具体如下：
<ul>
<li>渲染元素(函数方法，es6方式)
<ul>
<li>　函数方法</li>
</ul>
</li>
</ul>
<div class="cnblogs_code">
<pre>function Clock(props) {
return (
<div>
 <h1>Hello, world!</h1>
 <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
</div>
);
}

function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('example')
);
}

setInterval(tick, 1000);</pre>
</div>
<ul>
<li style="list-style-type: none">
<ul>
<li>es6方法</li>
</ul>
</li>
</ul>
<div class="cnblogs_code">
<pre>class Clock extends React.Component {
render() {
return (
 <div>
 <h1>Hello, world!</h1>
 <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
 </div>
);
}
}

function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('example')
);
}

setInterval(tick, 1000);</pre>
</div>
<ul>
<li>组件</li>
</ul>
　　1、我们可以使用函数定义一个组件：
<div class="cnblogs_code">
<pre>function HelloMessage(props) {
return <h1>Hello World!</h1>;
}</pre>
</div>
　　也可以使用ES6 class来定义一个组件：
<div class="cnblogs_code">
<pre>class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}</pre>
</div>
　　2.需要向组件传递参数，可以使用this.props对象
<div class="cnblogs_code">
<pre>function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}

const element = <HelloMessage name="Runoob"/>;

ReactDOM.render(
element,
document.getElementById('example')
);</pre>
</div>
　　注意：在添加属性时，class属性需要写成className,for属性需要写成htmlFor，这是因为class和for是JavaScript的保留字。
　　复合组件
　　可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。
<div class="cnblogs_code">
<pre><script type="text/babel">
function Name(props) {
return <h1>名称：{props.name}</h1>;
}
function Url(props) {
return <h1>地址：{props.url}</h1>;
}
function Nickname(props) {
return <h1>小名：{props.nickname}</h1>;
}
function App() {
return (
<div>
 <Name name="Tom" />
 <Url url="https://www.cnblogs.com/freedom-feng/" />
 <Nickname nickname="Jack" />
</div>
 );
}

ReactDOM.render(
<App />,
 document.getElementById('example')
);
</script></pre>
</div>
<ul>
<li>事件</li>
</ul>
　　使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法(推荐方式)。例如，下面的 Toggle 组件渲染一个让用户切换开关状态的按钮：
<div class="cnblogs_code">
<pre>class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};

// 这边绑定是必要的，这样 `this` 才能在回调函数中使用
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(prevState => ({
 isToggleOn: !prevState.isToggleOn
}));
}

render() {
return (
 <button onClick={this.handleClick}>
 {this.state.isToggleOn ? 'ON' : 'OFF'}
 </button>
);
}
}

ReactDOM.render(
<Toggle />,
document.getElementById('example')
);</pre>
</div>
　　注意：类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。
　　如果上面使用 bind 让你很烦，这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法，你可以使用属性初始化器来正确的绑定回调函数：
<div class="cnblogs_code">
<pre><script type="text/babel">
class LoggingButton extends React.Component {
// 这个语法确保了 `this` 绑定在handleClick 中
// 这里只是一个测试
handleClick = () => {
console.log('this is:', this);
}

render() {
return (
 <button onClick={this.handleClick}>
 Click me
 </button>
 );
}
}
ReactDOM.render(
<LoggingButton />,
document.getElementById('example')
);
</script></pre>
</div>
　　如果你没有使用属性初始化器语法，你可以在回调函数中使用箭头函数：
<div class="cnblogs_code">
<pre>class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}

render() {
//这个语法确保了 `this` 绑定在handleClick 中
return (
 <button onClick={(e) => this.handleClick(e)}>
 Click me
 </button>
);
}
}</pre>
</div>
<ul>
<li style="list-style-type: none">
<ul>
<li>事件传参</li>
</ul>
</li>
</ul>
<div class="cnblogs_code">
<pre><button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button></pre>
</div>
　　上面两种方式是等价的。
　　在例子中，参数e作为时间对象将被作为第二个参数进行传递。通过箭头函数的方式，事件对象必须显式的进行传递，但是通过bind的方式，时间对象以及更多的参数将会被隐式的进行传递。
　　注意：通过bind方式向监听函数传参，在类组件中定义的监听函数，事件对象e要排在所传参数的后面，例如：
<div class="cnblogs_code">
<pre><script type="text/babel">
class Popper extends React.Component{
constructor(){
 super();
 this.state = {name:'Hello world!'};
}

preventPop(name, e){ //事件对象e要放在最后
 e.preventDefault();
 alert(name);
}

render(){
 return (
 <div>
 <p>hello</p>
 {/* 通过 bind() 方法传递参数。 */}
 <button onClick={this.preventPop.bind(this,this.state.name)}>Click</button>
 </div>
 );
}
}

ReactDOM.render(
<Popper />,
document.getElementById('example')
);
</script></pre>
</div>
<ul>
<li>条件渲染</li>
</ul>
　　先看两个组件：
<div class="cnblogs_code">
<pre>function UserGreeting(props) {
return <h1>欢迎回来!</h1>;
}

function GuestGreeting(props) {
return <h1>请先注册。</h1>;
}</pre>
</div>
　　创建一个 Greeting 组件，它会根据用户是否登录来显示其中之一：
<div class="cnblogs_code">
<pre>function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}

ReactDOM.render(
// 尝试修改 isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('example')
);</pre>
</div>
　　元素变量
　　可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分，而输出的其他部分不会更改。
　　在下面的例子中，我们将要创建一个名为 LoginControl 的有状态的组件。
　　它会根据当前的状态来渲染 <LoginButton /> 或 <LogoutButton />，它也将渲染前面例子中的 <Greeting />。
<div class="cnblogs_code">
<pre>class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}

handleLoginClick() {
this.setState({isLoggedIn: true});
}

handleLogoutClick() {
this.setState({isLoggedIn: false});
}

render() {
const isLoggedIn = this.state.isLoggedIn;

let button = null;
if (isLoggedIn) {
 button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
 button = <LoginButton onClick={this.handleLoginClick} />;
}

return (
 <div>
 <Greeting isLoggedIn={isLoggedIn} />
 {button}
 </div>
);
}
}

ReactDOM.render(
<LoginControl />,
document.getElementById('example')
);</pre>
</div>
　　与运算符 &&
　　用花括号包裹代码在 JSX 中嵌入任何表达式，也包括 JavaScript 的逻辑与 &&，它可以方便地条件渲染一个元素。
<div class="cnblogs_code">
<pre><script type="text/babel">
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
 <h1>Hello!</h1>
 {unreadMessages.length > 0 &&
 <h2>
 您有 {unreadMessages.length} 条未读信息。
 </h2>
 }
</div>
);
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('example')
);
</script>　　</pre>
</div>
　　在 JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false。
　　因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。
　　三目运算符
　　条件渲染的另一种方法是使用 JavaScript 的条件运算符:
<div class="cnblogs_code">
<pre>render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
 {isLoggedIn ? (
 <LogoutButton onClick={this.handleLogoutClick} />
 ) : (
 <LoginButton onClick={this.handleLoginClick} />
 )}
</div>
);
}</pre>
</div>
　　阻止组件渲染
　　在极少数情况下，你可能希望隐藏组件，即使它被其他组件渲染。让 render 方法返回 null 而不是它的渲染结果即可实现。
　　在下面的例子中，<WarningBanner /> 根据属性 warn 的值条件渲染。如果 warn 的值是 false，则组件不会渲染：
<div class="cnblogs_code">
<pre>function WarningBanner(props) {
if (!props.warn) {
return null;
}

return (
<div className="warning">
 警告!
</div>
);
}

class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}

handleToggleClick() {
this.setState(prevState => ({
 showWarning: !prevState.showWarning
}));
}

render() {
return (
 <div>
 <WarningBanner warn={this.state.showWarning} />
 <button onClick={this.handleToggleClick}>
 {this.state.showWarning ? '隐藏' : '显示'}
 </button>
 </div>
);
}
}

ReactDOM.render(
<Page />,
document.getElementById('example')
);</pre>
</div>
　　组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。例如，componentWillUpdate 和 componentDidUpdate 依然可以被调用。
<ul>
<li>列表</li>
</ul>
　　使用JavaScript的map()方法来创建列表
<div class="cnblogs_code">
<pre>const numbers = ;
const listItems = numbers.map((numbers) =>
<li>{numbers}</li>
);

ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('example')
);</pre>
</div>
　　可以将以上实例重构成一个组件，组件接收数组参数，每个列表元素分配一个 key，不然会出现警告 a key should be provided for list items，意思就是需要包含 key：
<div class="cnblogs_code">
<pre>function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
 {number}
</li>
);
return (
<ul>{listItems}</ul>
);
}

const numbers = ;
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);</pre>
</div>
　　keys
　　Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。
<div class="cnblogs_code">
<pre>const numbers = ;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);</pre>
</div>
　　一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的 id 作为元素的 key:
<div class="cnblogs_code">
<pre>const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);</pre>
</div>
　　当元素没有确定的 id 时，你可以使用他的序列号索引 index 作为 key：
<div class="cnblogs_code">
<pre>const todoItems = todos.map((todo, index) =>
// 只有在没有确定的 id 时使用
<li key={index}>
{todo.text}
</li>
);</pre>
</div>
　　如果列表可以重新排序，不建议使用索引来进行排序，因为这会导致渲染变得很慢。
　　用key提取组件
　　元素的 key 只有在它和它的兄弟节点对比时才有意义。
　　错误示范：
<div class="cnblogs_code">
<pre>function ListItem(props) {
const value = props.value;
return (
// 错啦！你不需要在这里指定key:
<li key={value.toString()}>
 {value}
</li>
);
}

function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
//错啦！元素的key应该在这里指定：
<ListItem value={number} />
);
return (
<ul>
 {listItems}
</ul>
);
}

const numbers = ;
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);</pre>
</div>
　　key正确使用方式：
<div class="cnblogs_code">
<pre>function ListItem(props) {
// 对啦！这里不需要指定key:
return <li>{props.value}</li>;
}

function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 又对啦！key应该在数组的上下文中被指定
<ListItem key={number.toString()}
 value={number} />

);
return (
<ul>
 {listItems}
</ul>
);
}

const numbers = ;
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);</pre>
</div>
　　在 map() 方法的内部调用元素时，最好随时记得为每一个元素加上一个独一无二的 key。
　　元素的key在他的兄弟元素之间应该唯一
　　数组元素中使用的 key 在其兄弟之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的键。
<div class="cnblogs_code">
<pre>function Blog(props) {
const sidebar = (
<ul>
 {props.posts.map((post) =>
 <li key={post.id}>
 {post.title}
 </li>
 )}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
 <h3>{post.title}</h3>
 <p>{post.content}</p>
</div>
);
return (
<div>
 {sidebar}
 <hr />
 {content}
</div>
);
}

const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById('example')
);</pre>
</div>
　　key 会作为给 React 的提示，但不会传递给你的组件。如果您的组件中需要使用和 key 相同的值，请将其作为属性传递：
<div class="cnblogs_code">
<pre>const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);</pre>
</div>
　　上面例子中，Post 组件可以读出 props.id，但是不能读出 props.key。
　　在jsx中嵌入map()
　　在上面的例子中，我们声明了一个单独的 listItems 变量并将其包含在 JSX 中:
<div class="cnblogs_code">
<pre>function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()}
 value={number} />

);
return (
<ul>
 {listItems}
</ul>
);
}</pre>
</div>
　　JSX 允许在大括号中嵌入任何表达式，所以我们可以在 map() 中这样使用：
<div class="cnblogs_code">
<pre>function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
 {numbers.map((number) =>
 <ListItem key={number.toString()}
 value={number} />

 )}
</ul>
);
}</pre>
</div>
　　这么做有时可以使你的代码更清晰，但有时这种风格也会被滥用。就像在 JavaScript 中一样，何时需要为了可读性提取出一个变量，这完全取决于你。但请记住，如果一个 map() 嵌套了太多层级，那你就可以提取出组件。
 
 
 
 
 
　　以上来自菜鸟教程：https://www.runoob.com/react/react-tutorial.html 
来源：https://www.cnblogs.com/freedom-feng/p/11733593.html

頁: [1]

琼殿技术论坛's Archiver

react 基础语法使用