条件渲染
使用运算符if和条件运算符去创建元素来表现当前的状态。
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
//返回的JSX
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
几种在JSX中内联条件渲染的方法
&&与运算符
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
因为在JS中，true&&expression总是返回expression，而false&&expression总是返回false.
三目运算符
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
阻止组件渲染
让render方法返回null.
函数组件根据条件判断直接return null.
列表&Key
运用JS的map()方法遍历数组，将数组中的子项通过{}赋值进去。
a key should be provided for list items
为什么要给每一个li设置key呢？
有了key，可以帮助React识别哪些元素改变了，比如被添加或删除。我们应当给数组中的每一个元素赋予一个确定的标识。
我们通常使用数据id来作为元素的key。
万不得已，不要用索引index作为元素的key。
一个好的经验法则：在map()方法中的元素需要设置key属性。
表单
受控组件
在React中，<textarea>用value属性来代表其文本，这与<input>很类似。
<select>标签不使用selected属性，而是在根select标签中使用value属性，value即为被选中的那个值。这样input,textarea,select这几个表单控件在react中的操作逻辑很类似。
状态提升
将多个组件中需要共享的state向上移动到他们的最近的共同父组件中，便可实现共享state。通过使用受控组件来解决。与input接受value和onChange一样，自定义的子组件接受父组件传过来的值和onXXX来进行。
组合和继承
props和组合已经可以为你提供清晰而安全地定制组件外观和行为的灵活方式。
组件可以接受任意props,包括基本数据类型，React元素以及函数。
children prop与插槽很类似。
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
React哲学
- 将设计好的UI划分为组件层级
根据单一功能原则来判定组件的范围。一个组件原则上只能负责一个功能。
UI也就是组件结构与后台返回的JSON数据模型能够一一对应。
理清组件的层级关系。 - 用React创建一个静态版本
将渲染UI和添加交互两个过程分开。构建静态版本时，完全不应该使用state。state代表了随时间会产生变化的数据，应当在实现交互时使用。通过props传入所需的数据。
构建应用的两种方式：
自上而下：应用简单
自下而上：应用复杂大型 - 确定UI state的最小且完整表示
只保留应用所需的可变state的最小集合，其他数据均由他们计算产生。
检查相应数据是否属于state：
- 由父组件通过props传递而来，不属于state
- 随时间推移而保持不变，不属于state
- 可以根据其他state或props计算出该数据的值，不属于state
- 确定state放置的位置
- 找到根据这个state进行渲染的所有组件
- 找到这些组件的共同所有者组件
- 该共同所有者或者更高层级组件应该拥有该state
- 或者直接新建一个新组件来存放该state，再将这个新组建放在高于共同所有者组件层级的位置。
网友评论