[iOS Use property to access 'backgroundColor'.

ios/sdk/WeexSDK/Sources/Component/WXComponent_internal.h

@@ -170,11 +170,16 @@ typedef id (^WXDataBindingBlock)(NSDictionary *data, BOOL *needUpdate);
     NSMutableDictionary<NSString *, NSArray *> *_eventParameters;
 }
 
-/* _transform may be modified in mutiple threads. DO NOT use "_transform = XXX" directly.
+/* DO NOT use "_transform = XXX" directly.
  Ivar access in ObjC is compiled to code with additional release or retain. So use Ivar in mutiple
  thread may lead to crash. Use an ATOMIC property is well enough. */
 @property (atomic, strong) WXTransform *transform;
 
+/**
+ DO NOT use "_backgroundColor" directly. The same reason as '_transform'.
+ */
+@property (atomic, strong) UIColor* backgroundColor;
+
 ///--------------------------------------
 /// @name Package Internal Methods
 ///--------------------------------------

ios/sdk/WeexSDK/Sources/Display/WXComponent+Display.m

@@ -289,7 +289,7 @@ - (WXDisplayBlock)_compositeDisplayBlock
 - (void)_collectCompositingDisplayBlocks:(NSMutableArray *)displayBlocks context:(CGContextRef)context isCancelled:(BOOL(^)(void))isCancelled
 {
     // TODO: compositingChild has no chance to applyPropertiesToView, need update here?
-    UIColor *backgroundColor = _backgroundColor;
+    UIColor *backgroundColor = self.backgroundColor;
     BOOL clipsToBounds = _clipToBounds;
     CGRect frame = self.calculatedFrame;
     CGRect bounds = CGRectMake(0, 0, frame.size.width, frame.size.height);
@@ -349,15 +349,13 @@ - (void)_drawBorderWithContext:(CGContextRef)context size:(CGSize)size
 
     CGContextSetAlpha(context, _opacity);
     // fill background color
-    @synchronized (self) {
-        if (_backgroundColor && CGColorGetAlpha(_backgroundColor.CGColor) > 0) {
-            CGContextSetFillColorWithColor(context, _backgroundColor.CGColor);
-            UIBezierPath *bezierPath = [UIBezierPath wx_bezierPathWithRoundedRect:rect topLeft:topLeft topRight:topRight bottomLeft:bottomLeft bottomRight:bottomRight];
-            [bezierPath fill];
-            WXPerformBlockOnMainThread(^{
-                _view.backgroundColor = UIColor.clearColor;
-            });
-        }
+    if (self.backgroundColor && CGColorGetAlpha(self.backgroundColor.CGColor) > 0) {
+        CGContextSetFillColorWithColor(context, self.backgroundColor.CGColor);
+        UIBezierPath *bezierPath = [UIBezierPath wx_bezierPathWithRoundedRect:rect topLeft:topLeft topRight:topRight bottomLeft:bottomLeft bottomRight:bottomRight];
+        [bezierPath fill];
+        WXPerformBlockOnMainThread(^{
+            _view.backgroundColor = UIColor.clearColor;
+        });
     }
     // Top
     if (_borderTopWidth > 0) {
@@ -596,7 +594,7 @@ - (void)_handleBorders:(NSDictionary *)styles isUpdating:(BOOL)updating
             _layer.borderWidth = _borderTopWidth;
             _layer.borderColor = _borderTopColor.CGColor;
             if ((_transition.transitionOptions & WXTransitionOptionsBackgroundColor) != WXTransitionOptionsBackgroundColor ) {
-                _layer.backgroundColor = _backgroundColor.CGColor;
+                _layer.backgroundColor = self.backgroundColor.CGColor;
             }
         }
     }
@@ -608,7 +606,7 @@ - (BOOL)_bitmapOpaqueWithSize:(CGSize)size
     WXRoundedRect *borderRect = [[WXRoundedRect alloc] initWithRect:rect topLeft:_borderTopLeftRadius topRight:_borderTopRightRadius bottomLeft:_borderBottomLeftRadius bottomRight:_borderBottomRightRadius];
     WXRadii *radii = borderRect.radii;
     BOOL hasBorderRadius = [radii hasBorderRadius];
-    return (!hasBorderRadius) && _opacity == 1.0 && CGColorGetAlpha(_backgroundColor.CGColor) == 1.0 && [self _needsDrawBorder];
+    return (!hasBorderRadius) && _opacity == 1.0 && CGColorGetAlpha(self.backgroundColor.CGColor) == 1.0 && [self _needsDrawBorder];
 }
 
 - (CAShapeLayer *)drawBorderRadiusMaskLayer:(CGRect)rect

ios/sdk/WeexSDK/Sources/Model/WXComponent.mm

@@ -70,6 +70,7 @@ @implementation WXComponent
 }
 
 @synthesize transform = _transform;
+@synthesize backgroundColor = _backgroundColor;
 
 #pragma mark Life Cycle
 
@@ -391,7 +392,7 @@ - (UIView *)view
             _layer.borderWidth = _borderTopWidth;
             [self _resetNativeBorderRadius];
             _layer.opacity = _opacity;
-            _view.backgroundColor = _backgroundColor;
+            _view.backgroundColor = self.backgroundColor;
         }
 
         if (_backgroundImage) {
@@ -857,10 +858,8 @@ - (void)setGradientLayer
             UIColor * endColor = (UIColor*)linearGradient[@"endColor"];
             CAGradientLayer * gradientLayer = [WXUtility gradientLayerFromColors:@[startColor, endColor] locations:nil frame:strongSelf.view.bounds gradientType:(WXGradientType)[linearGradient[@"gradientType"] integerValue]];
             if (gradientLayer) {
-                @synchronized (strongSelf) {
-                    _backgroundColor = [UIColor colorWithPatternImage:[strongSelf imageFromLayer:gradientLayer]];
-                }
-                strongSelf.view.backgroundColor = _backgroundColor;
+                strongSelf.backgroundColor = [UIColor colorWithPatternImage:[strongSelf imageFromLayer:gradientLayer]];
+                strongSelf.view.backgroundColor = strongSelf.backgroundColor;
                 [strongSelf setNeedsDisplay];
             }
         }

ios/sdk/WeexSDK/Sources/View/WXComponent+ViewManagement.mm

@@ -174,7 +174,7 @@ - (void)viewDidUnload
 
 - (void)_initViewPropertyWithStyles:(NSDictionary *)styles
 {
-    _backgroundColor = styles[@"backgroundColor"] ? [WXConvert UIColor:styles[@"backgroundColor"]] : [UIColor clearColor];
+    self.backgroundColor = styles[@"backgroundColor"] ? [WXConvert UIColor:styles[@"backgroundColor"]] : [UIColor clearColor];
     _backgroundImage = styles[@"backgroundImage"] ? [WXConvert NSString:styles[@"backgroundImage"]]: nil;
     _opacity = styles[@"opacity"] ? [WXConvert CGFloat:styles[@"opacity"]] : 1.0;
     _clipToBounds = styles[@"overflow"] ? [WXConvert WXClipType:styles[@"overflow"]] : NO;
@@ -193,9 +193,7 @@ - (void)_transitionUpdateViewProperty:(NSDictionary *)styles
 {
     WX_CHECK_COMPONENT_TYPE(self.componentType)
     if (styles[@"backgroundColor"]) {
-        @synchronized (self) {
-            _backgroundColor = [WXConvert UIColor:styles[@"backgroundColor"]];
-        }
+        self.backgroundColor = [WXConvert UIColor:styles[@"backgroundColor"]];
     }
     if (styles[@"opacity"]) {
         _opacity = [WXConvert CGFloat:styles[@"opacity"]];
@@ -213,9 +211,7 @@ - (void)_updateViewStyles:(NSDictionary *)styles
     }
 
     if (styles[@"backgroundColor"]) {
-        @synchronized (self) {
-            _backgroundColor = [WXConvert UIColor:styles[@"backgroundColor"]];
-        }
+        self.backgroundColor = [WXConvert UIColor:styles[@"backgroundColor"]];
         [self setNeedsDisplay];
     }
 
@@ -311,9 +307,7 @@ - (void)resetBorder:(NSArray *)styles
 - (void)_resetStyles:(NSArray *)styles
 {
     if (styles && [styles containsObject:@"backgroundColor"]) {
-        @synchronized (self) {
-            _backgroundColor = [UIColor clearColor];
-        }
+        self.backgroundColor = [UIColor clearColor];
         [self setNeedsDisplay];
     }
     if (styles && [styles containsObject:@"boxShadow"]) {